使用javascript取消选择文本框的内容答案

【问题标题】：Deselect contents of a textbox with javascript使用javascript取消选择文本框的内容
【发布时间】：2010-10-22 03:06:21
【问题描述】：

我知道使用 javascript 您可以使用以下代码（在 jQuery 中）选择文本框的内容：

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

有没有办法做相反的事情？取消选择文本框的内容？我将一系列文本框的焦点事件设置为选择其中的内容。现在有时我想关注一个特定的文本框而不选择它。我打算做的是为这个特定的文本框调用焦点事件，然后调用它来取消选择它。

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

//code....

$("#txt1").focus();

//some code here to deselect the contents of this textbox

有什么想法吗？

谢谢！

【问题讨论】：

标签： javascript jquery dom focus

【解决方案1】：

这个呢：

$("input").focus(function(){
  this.selectionStart = this.selectionEnd = -1;
});

【讨论】：

在这种缓慢的时候，Firefox 占用了 1.5GB 的内存吗？我喜欢在我杀死 -9 之前这样做

【解决方案2】：

如果您只是将文本框的值分配给自身，它应该取消选择文本。

【讨论】：

【解决方案3】：

您需要设置selectionStart 和selectionEnd 属性。但是由于某种原因，将这些设置在焦点事件上不起作用（我不知道为什么）。要使其工作，请在一小段时间后设置属性。

  $(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
    });
  });

【讨论】：

【解决方案4】：

要“聚焦特定文本框而不选择它”：我会使用patched jquery plugin jquery-fieldselection的部分

使用它可以调用

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

或者使用这个将光标放在文本末尾的简化版本（默认情况下）

(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; });
})();

这样使用：

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

【讨论】：

【解决方案5】：

与其选择然后取消选择，不如在 dom 元素上临时存储一个布尔值？

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

 //code....

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

【讨论】：

【解决方案6】：

我想提出一个简单的解决方案

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

$("input[type=text]").blur(function() {
    $('input[type="hidden"][value=""]').select();
});

//code....

$("#txt1").focus();

【讨论】：

【解决方案7】：

这是一个没有jquery的简单解决方案

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

【讨论】：

【解决方案8】：

如果您想使用 jQuery 取消选择文本框，请执行以下操作：

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

【讨论】：