Html Chrome表单处理问题：input onfocus="；这是。选择（）；

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

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

这在Firefox和Internet Explorer中运行良好（其目的是使用默认文本向用户描述字段，但突出显示它，以便他们单击后可以开始键入），但我在Chrome中无法使用它。当我在Chrome中单击表单字段时，文本高亮显示一秒钟，然后光标跳到默认文本的末尾，高亮显示消失

---

关于如何在Chrome中实现此操作，您有什么想法吗？

您必须将此操作绑定到onclick事件中，而不是绑定到onfocus事件，它将按照您的意愿工作。

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

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

onmouseup=“return false”

。

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

setTimeout（）

延迟对

select（）

的实际调用。然后我在文本框的焦点事件中调用该函数。使用setTimeout将延迟执行，直到调用堆栈再次为空，这将是在浏览器完成处理您单击时发生的所有事件（mousedown、mouseup、click、focus等）时。这是一个有点黑客，但它的工作

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

然后，您可以执行以下操作来选择焦点：

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

---

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

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

---

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

这对我来说最合适

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

---

mouseup事件在onfocus之后触发。

只需使用

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

使用键盘焦点时，只有

onfocus

触发选择文本，因为

未设置此项。单击的

。使用鼠标焦点，

onmousedown

触发，然后

onfocus

再

onclick

，它选择

onclick

中的文本，但不选择

onfocus

（Chrome需要这样做）

当字段已经聚焦时，鼠标单击不会触发聚焦，这会导致不选择任何内容

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

---

或者是Firefox的

onfocus=“setTimeout（function（）{select（this）}，118）”

。

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

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

谢谢。这对我有用

---

将处理鼠标而不是键盘。保持专注会更好。我怀疑问题与对.select（）的调用有关，而不是与触发的事件有关。@Dan，但使用键盘切换到字段会自动选择字段内容。@Lee，我想不出任何不这样做的，但这种行为取决于浏览器实现它。@Tyler，是的，但是如果一个浏览器没有这样的行为，那么尝试让它的行为有所不同并不是一个好主意。这对熟悉该浏览器的用户来说是陌生的。不仅仅是浏览器在切换到字段时选择文本，大多数原生O/s表单字段也这样做。这是一个非常糟糕的解决方案，因为在选择字段后单击任何位置都应该移动光标，而不是重新选择所有内容。请不要使用这个解决方案，它非常令人沮丧。如果通过键盘获得焦点，效果会很差。下一次单击选择输入，而不是移动插入符号。如果鼠标按下和单击之间的间隔超过10毫秒（用户按住鼠标按钮超过10毫秒），则此解决方案不起作用。回答得好。在Chrome、firefox和safari上都能完美运行。onfocus=“this.select（）”onmouseup=“return false”这是chrome手机页面中缺少的部分。这太棒了！工作完美。多年来，我一直对Webkit如何打破这一点感到恼火！

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

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