Deselect contents of a textbox with javascript

Question

I understand that with javascript you can select the contents of a textbox with the following code (in jQuery):

$(\"#txt1\").select();

Is t

Answer 1

You need to set the selectionStart and selectionEnd attribute. But for some reason, setting these on focus event doesn't work (I have no idea why). To make it work, set the attributes after a small interval.

  $(document).ready(function(){
    $('#txt1').focus(function(){
      setTimeout(function(){
        // set selection start, end to 0
        $('#txt1').attr('selectionStart',0);
        $('#txt1').attr('selectionEnd',0);
      },50);  // call the function after 50ms
    });
  });

Answer 2

If you just assign the value of the textbox to itself, it should deselect the text.

Answer 3

Rather than selecting and then deselecting, why not just temporarily store a boolean on the dom element?

 $("input[type=text]").focus(function() {
     if($(this).skipFocus) return;
     $(this).select();
 });

 //code....

 $("#txt1").skipFocus = true;
 $("#txt1").focus();

Answer 4

Here is a simple solution without jquery

<input type="text" onblur="this.selectionStart = this.selectionEnd = -1;">

Answer 5

To "focus a particular textbox WITHOUT selecting it": I would use the part of the patched jquery plugin jquery-fieldselection

using that you can call

$('#my_text_input').setSelection({"start":0, "end":0}); // leaves the cursor at the left

or use this reduced version that places the cursor at the end of the text (by default)

(function() {
var fieldSelection = {
    setSelection: function() {
        var e = (this.jquery) ? this[0] : this, len = this.val().length || ;
        var args = arguments[0] || {"start":len, "end":len};
        /* mozilla / dom 3.0 */
        if ('selectionStart' in e) {
            if (args.start != undefined) {
                e.selectionStart = args.start;
            }
            if (args.end != undefined) {
                e.selectionEnd = args.end;
            }
            e.focus();
        }
        /* exploder */
        else if (document.selection) {
            e.focus();
            var range = document.selection.createRange();
            if (args.start != undefined) {
                range.moveStart('character', args.start);
                range.collapse();
            }
            if (args.end != undefined) {
                range.moveEnd('character', args.end);
            }
            range.select();
        }
        return this;
    }
};
jQuery.each(fieldSelection, function(i) { jQuery.fn[i] = this; });
})();

used this way:

$('#my_text_input').setSelection(); // leaves the cursor at the right

Answer 6

If you want to deselect a text box using jQuery do the following:

   $(your_input_selector).attr('disabled', 'disabled');
   $(your_input_selector).removeAttr('disabled');