How to set focus on text box and set cursor position when page loads

While implementing a high performance search functionality for a site, I ran into some interesting issues with some UI aspects. So I thought I would share it with everybody so you have answers to some of the following questions when you run into similar issues.

• How to set focus in text box when page load

  This is a very common requirement that when you are implementing a search box for your site, you want the users to be able to start typing in search keywords when the page load. Well it is pretty simple by using a small javascript on the page. Since Microsoft shipd jQuery with Visual Studio now and jQuery provides very concise implementation of some very common tasks, so I used jQuery to accomplish the task. Following snippet shows how to use jQuery to set focus on text box.

   $(document).ready(function () {
   	var keywordTextBox = $get("<%=keywordTextBox.ClientID%>");
   	keywordTextBox.focus();
   }
  

  Yes, I could have done whole thing in one line instead of storing the element in local variable first. But I needed this element for some other user as well. Soon you will see why. The code simple translates to when document has been loaded and DOM is ready get text box html element and call focus method to set focus on it.

• How to set cursor position at end of text in text box

  Now that you have seen how to set focus on text box, next thing you will run into is that when page post backs when you have text in search text box, the focus is set on the text box but it is set at the start of the text. What you are really looking for is that when you have some text in text box, the focus should be set at the end of the text so user can either continue with what is already there or start deleting for a new search term. The following snippet shows how you can use setSelectionRange or createTextRange depending on browser, javascript method on text box to set the cursor at the end of the text in text box. Or for that matter you can use this technique to set cursor in text box at any position.

  $(document).ready(function () {
  try {
    var keywordTextBox = $get("<%=keywordTextBox.ClientID%>");
    if (null != keywordTextBox) {
        var pos = keywordTextBox.value.length;
        if (keywordTextBox.setSelectionRange) {
           keywordTextBox.setSelectionRange(pos, pos);
        }
        else if (keywordTextBox.createTextRange) {
          var textRange = keywordTextBox.createTextRange();
          textRange.collapse(true);
          textRange.moveEnd("character", pos);
          textRange.moveStart("character", pos);
          textRange.select();
        }
        keywordTextBox.focus();
     }
  });
  

• How to handle enter key click in text box to submit page

  Now that we have set focus in text box. Now your user should be able to enter some text in the text box and hit ENTER key to perform search. Following code snippet shows how you can hook key events of your text box to look for ENTER key press and then submit the page.

  $(document).ready(function () {
  try {
    var keywordTextBox = $get("<%=keywordTextBox.ClientID%>");
    if (null != keywordTextBox) {
        var pos = keywordTextBox.value.length;
        if (keywordTextBox.setSelectionRange) {
           keywordTextBox.setSelectionRange(pos, pos);
        }
        else if (keywordTextBox.createTextRange) {
          var textRange = keywordTextBox.createTextRange();
          textRange.collapse(true);
          textRange.moveEnd("character", pos);
          textRange.moveStart("character", pos);
          textRange.select();
        }
        keywordTextBox.focus();
         $("input").keydown(function (e) {
         if (e.keyCode == 13) {
           __doPostBack("<%=searchButton.UniqueID%>", "");
          return false;
         }
        });
     }
  });
  

  The above code javascript snippet demonstrates all three features of handling various text box features together. You can see all this in real action at the following page. Start typing some search term and see how autocomplete start providing hints and then when you hit ENTER key, page posts back and returns with search results and then text box focus is set at the end of text in text box.

Live Demo Of Text Box Features