Chrome 表单处理问题：输入 onfocus="this.select()"

Question

当用户单击表单字段时，我使用以下 HTML 代码自动选择表单字段中的某些文本：

<input onfocus="this.select()" type="text" value="Search">

这在 Firefox 和 Internet Explorer 中工作得很好（目的是使用默认文本向用户描述该字段，但突出显示它，以便单击时他们可以开始输入），但我无法让它工作在 Chrome 中。当我单击 Chrome 中的表单字段时，文本会突出显示一瞬间，然后光标跳到默认文本的末尾，突出显示就会消失。

关于如何在 Chrome 中也实现此功能有什么想法吗？

Answer 1

您必须将此操作绑定到 onclick 事件，而不是绑定到 onfocus 事件，它将按您想要的方式工作。

<input onclick="this.select()" id="txt1" name="txt1" type="text" value="Search">

Answer 2

如果你真的坚持使用 onfocus，那么你还需要添加

onmouseup="return false"

。

Answer 3

这最适合我......

<input type="text"  onfocus="this.searchfocus = true;" onmouseup="if(this.searchfocus) {this.select(); this.searchfocus = false;}" />

mouseup 事件在 onfocus 之后触发。

Answer 4

这是一个适用于 Firefox、Chrome 和 IE 的解决方案，支持键盘焦点和鼠标焦点。它还可以正确处理焦点后的点击（它移动插入符号并且不会重新选择文本）：

<input
onmousedown="this.clicked = 1;"
onfocus="if (!this.clicked) this.select(); else this.clicked = 2;"
onclick="if (this.clicked == 2) this.select(); this.clicked = 0;"
>

使用键盘焦点时，仅

onfocus

会触发选择文本，因为未设置

this.clicked

。鼠标聚焦时，

onmousedown

会触发，然后是

onfocus

，然后是

onclick

，它会选择

onclick

中的文本，但不选择

onfocus

中的文本（Chrome 需要这样做）。

当字段已聚焦时鼠标单击不会触发

onfocus

，这会导致不选择任何内容。

Answer 5

我解决这个问题的方法是创建一个包装函数，使用

setTimeout()

来延迟对

select()

的实际调用。然后我只是在文本框的焦点事件中调用该函数。使用 setTimeout 会推迟执行，直到调用堆栈再次变空，即浏览器完成处理单击时发生的所有事件（mousedown、mouseup、click、focus 等）。这有点麻烦，但它确实有效。

function selectTextboxContent(textbox)
{
    setTimeout(function() { textbox.select(); }, 10);
}

然后你可以做这样的事情来进行焦点选择：

<input onfocus="selectTextboxContent(this);" type="text" value="Search">

Answer 6

基于 Jason 的答案，这里有一个函数，用内置超时的更新版本替换 DOM 输入节点的“选择”函数：

if (/chrome/i.test(navigator.userAgent)) {
    HTMLInputElement.prototype.brokenSelectFunction = 
        HTMLInputElement.prototype.select;

    HTMLInputElement.prototype.select = function() {
        setTimeout(function(closureThis) { return function() {
            closureThis.brokenSelectFunction();
        }; }(this), 10);
    };
}

基本上，（仅在 Chrome 中）我们只是将内置但损坏的 select() 函数重命名为brokenSelectFunction()，然后向所有名为 select() 的输入添加一个新函数，该函数在延迟后调用brokenSelectFunction()。现在，只需正常调用 select() 即可，因为根据 Jason 的延迟建议，内置 select 函数已被固定函数取代。

这样，您就不必担心更改现有的调用以使用包装函数（一旦在 Chrome 中解决了这个问题，您就可以删除上面的填充程序并恢复正常）。

textbox.select(); // now runs select with setTimeout built-in (in Chrome only)

编辑：您可能需要将用户代理匹配从“chrome”更改为“webkit”，因为此问题发生在包括 Safari 在内的所有 webkit 浏览器中，并且此修复程序适用于其中任何一个。

Answer 7

只需使用

<input onmouseup=select()>

。这适用于所有浏览器。

Answer 8

这个问题是五年前发布的，但是使用 HTML5，您可以使用占位符属性来实现此功能。

<input type="text" name="fname" placeholder="First name">

Answer 9

onfocus="setTimeout(function(){select(this)})" 

或

onfocus="setTimeout(function(){select(this)},118)"

（对于 Firefox）。

Answer 10

谢谢ilawton。这对我有用

    <input type="text"  onfocus="this.searchfocus = true;" onmouseup="if(this.searchfocus) {this.select(); this.searchfocus = false;}" />

Answer 11

现在，它在 Chrome 中运行得很好。我们只需给予

onfocus="javascript:this.select();"

。确保它正在随页面一起加载。