在使用jQuery重点选择文本在Safari和Chrome不工作(Selecting text on

我有以下的jQuery代码（类似于这个问题在Chrome和Safari，在Firefox和IE的作品，但失败）（没有错误，只是不工作）。任何想法的解决方法吗？

$("#souper_fancy").focus(function() { $(this).select() });

Answer 1:

这是导致该选择机会，获得未选择的onmouseup事件，所以你只需要添加：

$("#souper_fancy").mouseup(function(e){
    e.preventDefault();
});

Answer 2:

$('#randomfield').focus(function(event) {
    setTimeout(function() {$('#randomfield').select();}, 0);
});

Answer 3:

这工作正常输入型=“文本”元素。什么样的元素是#souper_fancy？

$("#souper_fancy").focus(function() {
    $(this).select();
});

Answer 4:

只是防止在鼠标松开默认使文本选择在任何时候都可以打开。 MouseUp事件负责清除文本选择。然而，通过阻止其默认行为，您无法取消textusing鼠标。

为了避免这一点，得到了文本选择重新工作，你可以在焦点设置一个标志，从鼠标松开阅读并重置它想象中那么未来的MouseUp事件会工作。

$("#souper_fancy").focus(function() {
    $(this).select();

    //set flag for preventing MOUSEUP event....
    $this.data("preventMouseUp", true);
});

$("#souper_fancy").mouseup(function(e) {
    var preventEvent = $this.data("preventMouseUp");

    //only prevent default if the flag is TRUE
    if (preventEvent) {
        e.preventDefault();
    }

    //reset flag so MOUSEUP event deselect the text
    $this.data("preventMouseUp", false);
});

Answer 5:

尽管这适用于在IE，火狐，Chrome，Safari和Opera选择它，它不会让你通过点击火狐，Chrome和Safari第二次修改。不能完全肯定，但我认为这可能是由于这3个浏览器重新发布在IE中一个焦点事件，虽然该领域已经具有焦点因而决不让你真正插入光标（因为你重新选择一次的话），而和Opera似乎它没有这样做，所以焦点事件没有得到再次发射，从而光标被插入。

我发现了一个更好的固定在这叠后，不存在这样的问题，并在所有浏览器上运行。

Answer 6:

这也应该工作，铬：

$("#souper_fancy").focus(function() {
    var tempSouper = $(this);
    setTimeout(function(){
        tempSouper.select();
    },100);
});

Answer 7:

因为有闪烁，当您使用setTimeout的，还有另外一个基于事件的解决方案。这样，“焦点”事件附加了“鼠标松开”事件和事件处理程序再次分离本身。

    function selectAllOnFocus(e) {
    if (e.type == "mouseup") { // Prevent default and detach the handler
        console.debug("Mouse is up. Preventing default.");
        e.preventDefault();
        $(e.target).off('mouseup', selectAllOnFocus);
        return;
    }
    $(e.target).select();
    console.debug("Selecting all text");
    $(e.target).on('mouseup', selectAllOnFocus);
}

再用线的第一个事件

    $('.varquantity').on('focus', selectAllOnFocus);

Answer 8:

使用setSelectionRange()回调的内部requestAnimationFrame()

$(document).on('focus', '._selectTextOnFocus', (e) => {
    var input = e.currentTarget;
    var initialType = e.currentTarget.type;

    requestAnimationFrame(() => {
        // input.select() is not supported on iOS
        // If setSelectionRange is use on a number input in Chrome it throws an exception,
        // so here we switch to type text first.
        input.type = "text";
        input.setSelectionRange(0, Number.MAX_SAFE_INTEGER || 9999);
        input.type = initialType;
    });
});

使用setSelectionRange()代替select() ，因为select()在移动Safari浏览器无法正常工作（见iOS设备（移动Safari浏览器）编程选择输入字段中的文本）。

有必要使用等待requestAnimationFrame选择文本之前，否则元素没有被正确滚动到视图的键盘出现在iOS之后。

当使用setSelectionRange()是设置输入类型到重要text ，否则可能会引发在Chrome异常（见上INPUT TYPE =“号码”中铬不再允许selectionStart /选定结束）。

Answer 9:

如果有人再遇到这个问题，我在这里得到了一个纯粹的JS解决方案，它是（目前）对含所有的浏览器工作。移动

<input type="text" value="Hello world..." onFocus="window.setTimeout(() => this.select());">

（不包括的setTimeout（）它不工作的Safari浏览器，移动Safari和MS边）

文章来源: Selecting text on focus using jQuery not working in Safari and Chrome