为 Chrome 选择焦点错误寻找更好的解决方法

Question

我和this question中的用户有同样的问题，这是由于Webkit中的this bug造成的。但是，提供的解决方法不适用于我的应用程序。让我重新陈述这个问题，这样你就不必去阅读另一个问题了：

当它获得焦点时，我试图选择文本区域中的所有文本。以下 jQuery 代码适用于 IE/FF/Opera：

$('#out').focus(function(){
  $('#out').select();
});

但是，在 Chrome/Safari 中，文本被选中——非常短暂——但随后触发 mouseUp 事件并取消选择文本。上述链接中提供了以下解决方法：

$('#out').mouseup(function(e){
  e.preventDefault();
});

但是，这种解决方法对我没有好处。当用户给 textarea 焦点时，我想选择所有文本 only。如果他选择，他必须然后能够只选择部分文本。谁能想到仍然满足此要求的解决方法？

Answer 1

这个怎么样？

$('#out').focus(function () {
    $('#out').select().mouseup(function (e) {
        e.preventDefault();
        $(this).unbind("mouseup");
    });
});

Answer 2

接受的答案（以及到目前为止我发现的所有其他解决方案）不适用于键盘焦点，即。 e.按标签，至少在我的 Chromium 21 中没有。我使用以下 sn-p 代替：

$('#out').focus(function () {
  $(this).select().one('mouseup', function (e) {
    $(this).off('keyup');
    e.preventDefault();
  }).one('keyup', function () {
    $(this).select().off('mouseup');
  });
});

keyup 或 focus 处理程序中的e.preventDefault() 无济于事，因此键盘焦点后的取消选择似乎不会发生在它们的默认处理程序中，而是发生在 focus 和 keyup 事件之间。

正如@BarelyFitz 所建议的，使用命名空间事件可能会更好，以免意外解除绑定其他事件处理程序。将'keyup' 替换为'keyup.selectText'，将'mouseup' 替换为'mouseup.selectText'。

Answer 3

为什么不简单：

$('#out').focus(function(){
    $(this).one('mouseup', function() {
        $(this).select();
    });
});

似乎适用于所有主要浏览器...

Answer 4

一个非常不同的方法是将焦点事件与鼠标序列分开。这对我来说非常有效——没有状态变量、没有泄漏的处理程序、没有无意中删除处理程序，并且它适用于单击、选项卡或编程焦点。下面的代码和 jsFiddle -

$('#out').focus(function() {
    $(this).select();
});
$('#out').on('mousedown.selectOnFocus', function() {
    if (!($(this).is(':focus'))) {
        $(this).focus();
        $(this).one('mouseup.selectOnFocus', function(up) {
            up.preventDefault();
        });
    }
});

https://jsfiddle.net/tpankake/eob9eb26/27/

Answer 5

创建一个bool。在焦点事件后将其设置为true，并在鼠标向上事件后将其重置。在鼠标上移的过程中，如果是true，则知道用户刚刚选择了文本字段；因此，您知道必须防止鼠标向上发生。否则，你必须让它过去。

var textFieldGotFocus = false;

$('#out').focus(function()
{
    $('#out').select();
    textFieldGotFocus = true;
});

$('#out').mouseup(function(e)
{
    if (textFieldGotFocus)
        e.preventDefault();
});

$(document).mouseup(function() { textFieldGotFocus = false; });

将重置变量的 mouseup 侦听器放在 document 上很重要，因为不能保证用户会在文本字段上释放鼠标按钮。

Answer 6

onclick="var self = this;setTimeout(function() {self.select();}, 0);"

Answer 7

在将焦点放在输入框之前选择文本。

$('#out').select().focus();

Answer 8

digitalfresh 的解决方案大部分都在那里，但有一个错误，即如果您使用 JS 手动触发 .focus()（因此不使用单击），或者如果您选择该字段，那么您会收到一个不需要的 mouseup 事件绑定 -这会导致第一次单击应取消选择要忽略的文本。

解决：

var out = $('#out');
var mouseCurrentlyDown = false;

out.focus(function () {
  out.select();

  if (mouseCurrentlyDown) {
    out.one('mouseup', function (e) {
      e.preventDefault();
    });  
  }
}).mousedown(function() {
  mouseCurrentlyDown = true;
});

$('body').mouseup(function() {
  mouseCurrentlyDown = false;
});

注意：mouseup 事件应该在 body 上而不是 input 上，因为我们要考虑用户在输入中的 mousedown-ing，将鼠标移出输入，然后 mouseup-ing。

Answer 9

tpankake 的答案转换为可重用的 jQuery 函数..
（如果您对此表示赞同，也请对他的回答表示赞同）

在加载 jQuery 库后加载以下内容：

$.fn.focusSelect = function () {
    return this.each(function () {
        var me = $(this);
        me.focus(function () {
            $(this).select();
        });
        me.on('mousedown.selectOnFocus', function () {
            var me2 = $(this);
            if (me2.is(':focus') === false) {
                me2.focus();
                me2.one('mouseup.selectOnFocus', function (up) {
                    up.preventDefault();
                });
            }
        });
    });
};

像这样使用它：

$(document).ready(function () {
    // apply to all inputs on the page:
    $('input[type=text]').focusSelect();

    // apply only to one input
    $('#out').focusSelect();
});