选择焦点上的所有文本输入内容在 Microsoft Edge 中不起作用

Posted 2023-04-18

【中文标题】选择焦点上的所有文本输入内容在 Microsoft Edge 中不起作用

【英文标题】：Selecting all content of text input on focus doesn't work in Microsoft Edge

【发布时间】：2016-11-24 00:46:49

【问题描述】：

在选择输入字段中的所有文本时，我似乎遇到了特定于 Edge 的问题。我正在使用 Angular 的 ng-focus 调用控制器中的函数来选择字段中的所有文本。

function selectAllTextOnFocus($event) 
    $event.target.select();

这适用于除 Microsoft Edge 之外的所有浏览器，它不会选择输入字段中的文本。

除了输入字段的第一个选择之外，我还尝试了另一个有效的 jQuery 解决方案。之后，它会按预期工作并选择所有文本。

$('input').on('focus', function (e) 
    $(this).one('mouseup', function () 
        $(this).select();
        return false;
    ).select();
);

这只是 Microsoft Edge 的一个已知问题，还是我遗漏了什么？

【参考方案1】：

我是 Microsoft Edge 团队的工程师，请查看您所指的问题。目前，您可以在短暂延迟后调用 select 方法：

function selectAllTextOnFocus($event) 
    // See https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8229660/
    if ( navigator.userAgent.match(/Edge\/(13|14|15|16|17)/) ) 
        return setTimeout( $event.target.select.bind( $event.target ), 10)
    
    $event.target.select();

在这里测试这两种方法：https://jsfiddle.net/jonathansampson/xe9x9s7b/

我冒昧地在http://bugs.microsoftedge.com 上提交a public bug 进行跟踪。

【讨论】：

虽然这确实可以解决边缘问题，但当您有多个输入字段时，它会导致 chrome 出现一些意外行为。如果您选择了一个字段，然后单击另一个窗口，然后在您再次单击 chrome 时选择另一个字段，它会尝试选择两个字段的内容。这是可以重现该问题的plunker。感谢您的快速响应，并提交错误。我会留意的。

@SpencerMeyer 哦，太棒了?现在，您可以使用一些用户代理检测来避免陷入这个差距。我会更新答案。

因为我不喜欢这个解决方案，所以我做了一个 jsfiddle，setSelectionRange 适用于所有浏览器：jsfiddle.net/xe9x9s7b/11 另外，你不需要 10 毫秒作为超时，0 很好，就我所见，它只需要被浏览器排队

@Nicolas 可悲的是，这不是一个解决方案......我们正在谈论“焦点”事件。看到这个小提琴：jsfiddle.net/xe9x9s7b/15

今天在 Edge/17.17134 中仍然是一个问题