Cursor in Search Box on page load

API & Customization
1

I have a simple record search view (view_423) that I want the cursor to be in the search box without having to use the mouse or tab.

I have tried adding the following to the custom Javascript for this app:

$(document).on('knack-view-render.view_423', function(event, view, data) {
   $(".kn-search-filters input[type="text"]").focus();
});

It makes the page render blank.  I believe I am missing something simple.  Any one have any ideas

2

Hello,

I have reviewed the code above and can get the value in the search box higlighted.  Does anyone know how to clear the search box completely?  I would like for the entry to be reset on each load.  

Thanks in advance for the help! 

3

Chris:

I've made some progress.  The following code works for a specific field -- if the field is a text field.

$(document).on('knack-scene-render.scene_23', function(event, scene) {
  // Do something after the scene renders
  // must be field with class=input; type=text
  $('#field_5').focus().select();
});
 
Unfortunately, the field that I want to "select" is a Connection field; it doesn't work for that field type.  I'll probably post a question on this board and see if anybody has any ideas.
4

Jeff:

I did a little digging as I couldn't even remember what I did this for.  The code is loaded in the API & Code section of the builder, not on the html pages you are creating.  When you click on API & Code, you then choose the javascript tab.  Just for reference I have included exactly what I have saved there.  I remember mine went blank because I didn't have my scene and view correct.  If you look in the code section of the help you will see if it is a view it has to be programmed differently than if it is a scene.  I hope this is of some help.

/*Hightlight the search box */
$(document).on('knack-scene-render.scene_229', function(event, scene) {
$('input[type=text]').focus().select();
});
/*Auto Submit action link on paper roll search*/
$(document).on('knack-view-render.view_423', function(event, view, data) {
$('.kn-action-link').click();
});

 

Hope this helps.

5

Chris:

I have a similar need.  I want the cursor to be in the first (and only) field of a form without having to use the mouse.

I tried your revised code and all my pages rendered blank.  I also don't have Javascript experience.

Any ideas based on your research and success?

6

I figured it out.  I am new to java.  I am sure this is a cake walk for most but I am updating for any other beginners out there.

Although my view is a specific number the actual page is considered a scene.

This is the code that works to place the cursor, and it is amended to highlight the entire contents if there is already something in the search bar.  So focus moves the cursor, select highlights the contents if there are any.

$(document).on('knack-scene-render.scene_229', function(event, scene) {
$('input[type=text]').focus().select();
});

1 Like