在Safari和Chrome中无法使用jQuery选择焦点文字

我有以下jQuery代码（类似于此问题），可在Firefox和IE中使用，但在Chrome和Safari中失败（无错误，就是行不通）。有任何解决方法的想法吗？

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

是onmouseup事件导致选择未选中，因此您只需要添加：

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

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

这对于输入type =“ text”元素来说很好用。#souper_fancy是什么元素？

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

仅阻止默认的mouseup会导致文本选择始终处于打开状态。MOUSEUP事件负责清除文本选择。但是，通过防止其默认行为，您无法使用鼠标取消选择文本。

为了避免这种情况并使文本选择再次起作用，您可以在FOCUS上设置一个标志，从MOUSEUP读取它并进行重置，以便将来的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);
});

虽然可以在IE，Firefox，Chrome，Safari和Opera中选择它，但是它不允许您在Firefox，Chrome和Safari中再次单击来进行编辑。不能完全确定，但是我认为这可能是由于这3个浏览器重新发出了焦点事件，即使该字段已经具有焦点，因此也从未允许您实际插入光标（因为再次选择了它），而在IE中而Opera似乎并没有这样做，因此焦点事件没有再次触发，因此插入了光标。

我在此Stack帖子中找到了一个更好的修复程序，该修复程序没有该问题，并且可以在所有浏览器中使用。

这在chrome中也应该起作用：

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

由于使用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);

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上引发异常（请参阅Chrome上不再允许的inputType =“ number”上的selectionStart / selectionEnd）。

如果有人再次遇到此问题，我这里提供了一个纯JS解决方案，该解决方案（目前）适用于所有浏览器，包括 移动

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

（没有setTimeout（），它不能在Safari，移动Safari和MS Edge上运行）