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;}" />

onfocus后，mouseup事件会触发。

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输入节点的“select”函数：

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（），因为内置的select函数已被Jason的延迟建议替换为fixed函数。

这样，您就不必担心更改现有的调用以使用包装器功能（一旦在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)})"

Firefox的

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

Answer 10

感谢ilawton。这对我有用

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

Chrome表单处理问题：输入onfocus =“this.select（）”

10 个答案: