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

problem with Chrome form handling: input onfocus="this.select()"

提问by binaryorganic

I'm using the following HTML code to autoselect some text in a form field when a user clicks on the field:

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

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

This works fine in Firefox and Internet Explorer (the purpose being to use the default text to describe the field to the user, but highlight it so that on click they can just start typing), but I'm having trouble getting it to work in Chrome. When I click the form field in Chrome the text is highlighted for just a split second and then the cursor jumps to the end of the default text and the highlighting goes away.

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

Any ideas on how to get this working in Chrome as well?

关于如何在 Chrome 中实现此功能的任何想法？

采纳答案by Bakhtiyor

Instead of binding to onfocus event you must bind this action into onclick event and it will work as you wanted.

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

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

回答by Lee Kowalkowski

If you really insist on sticking with onfocus, then you'll need to add onmouseup="return false"too.

如果您真的坚持使用 onfocus，那么您也需要添加onmouseup="return false"。

回答by iLawton

This works best for me...

这对我来说最有效...

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

The mouseup event fires after onfocus.

mouseup 事件在 onfocus 之后触发。

回答by Jakub Vrána

This is a solution working in Firefox, Chrome and IE, both with keyboard focus and mouse focus. It also handles correctly clicks following the focus (it moves the caret and doesn't reselect the text):

这是一个适用于 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;"
>

With keyboard focus, only onfocustriggers which selects the text because this.clickedis not set. With mouse focus, onmousedowntriggers, then onfocusand then onclickwhich selects the text in onclickbut not in onfocus(Chrome requires this).

使用键盘焦点，仅onfocus触发选择文本，因为this.clicked未设置。用鼠标焦点，onmousedown触发器，然后onfocus然后onclick它选择在文本onclick而不是在onfocus（Chrome需要这一点）。

Mouse clicks when the field is already focused don't trigger onfocuswhich results in not selecting anything.

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

回答by Jason

The way I got around this was by creating a wrapper function that uses setTimeout()to delay the actual call to select(). Then I just call that function in the focus event of the textbox. Using setTimeout defers the execution until the call stack is empty again, which would be when the browser has finished processing all the events that happened when you clicked (mousedown, mouseup, click, focus, etc). It's a bit of a hack, but it works.

我解决这个问题的方法是创建一个包装函数，用于setTimeout()延迟对select(). 然后我只是在文本框的焦点事件中调用该函数。使用 setTimeout 将执行推迟到调用堆栈再次为空，这将是浏览器完成处理您单击时发生的所有事件（mousedown、mouseup、click、focus 等）时。这有点黑客，但它有效。

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

Then you can do something like this to do the selection on focus:

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

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

回答by Adam Hamilton

Building on Jason's answer, here is a function that replaces the "select" function of DOM input nodes with an updated version that has the timeout built in:

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

Basically, (in Chrome only) we just renamed the built-in but broken select() function to brokenSelectFunction() and then added a new function to all inputs called select() that calls brokenSelectFunction() after a delay. Now, just call select() normally, as the built-in select function has been replaced by the fixed function with Jason's delay suggestion.

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

This way, you don't have to worry about changing your existing calls to use a wrapper function (and once this is resolved in Chrome, you can just remove the above shim and go back to normal).

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

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

Edit: you might want to change the user-agent match from "chrome" to "webkit", as this issue happens in all webkit-browsers including Safari, and this fix will work for any of them.

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

回答by icache

Just use <input onmouseup=select()>. That works in all browsers.

只需使用<input onmouseup=select()>. 这适用于所有浏览器。

回答by Andrew Koper

This question was posted five years ago, but with HTML5, you can make this feature with the placeholder attribute.

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

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

回答by Alexander V. Ulyanov

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

or onfocus="setTimeout(function(){select(this)},118)"for Firefox.

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

回答by Noor Muhammad

Thanks ilawton. This works for me

谢谢ilawton。这对我有用

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