Question

我有以下jQuery代码（类似于this question），可以在Firefox和IE中使用，但在Chrome和Safari中失败（没有错误，只是不起作用）。任何解决方法的想法？

$("#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

这适用于input type =“text”元素。什么样的元素是#souper_fancy？

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

Answer 4

仅防止mouseup上的默认设置会导致文本选择始终为ON。 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);
});

Answer 5

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

我找到了一个更好的修复in this Stack post，它没有这个问题，适用于所有浏览器。

Answer 6

这也适用于chrome：

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

Answer 7

因为使用setTimeout时会出现闪烁，所以还有另一种基于事件的解决方案。这样，'focus'事件附加'mouseup'事件，事件处理程序再次自行分离。

           columnY             columnX 

         | cellValueA     |     1       |        
         | cellValueB     |     1       |
         | cellValueC     |     1       |
         | cellValueD     |     1       |

然后连接第一个事件

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

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中不起作用（请参阅Programmatically selecting text in an input field on iOS devices (mobile Safari)）。

在选择文本之前必须等待requestAnimationFrame，否则在iOS上键盘出现后元素无法正确滚动到视图中。

使用setSelectionRange()时，将输入类型设置为text非常重要，否则可能会在Chrome上引发异常（请参阅selectionStart/selectionEnd on input type="number" no longer allowed in Chrome）。

Answer 9

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

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

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

使用jQuery在Safari和Chrome中无法选择焦点上的文本

9 个答案: