onclick 与 onfocus - 输入文本选择行为不同。为什么？答案

【问题标题】：onclick vs. onfocus - Input text select behaviour differs. Why?onclick 与 onfocus - 输入文本选择行为不同。为什么？
【发布时间】：2012-03-23 22:04:11
【问题描述】：

我发现当我在“onfocus”功能的帮助下选择文本框中的文本时，我没有得到我期望的行为。

这里是演示网址：http://jsfiddle.net/BquZz/

代码副本如下：

<!DOCTYPE html>
<html>
<head>
<title>Select all</title>
<script type="text/javascript">
var text;
var log;

function select()
{
    text.select();
    log.innerHTML += ' - select';
}

window.onload = function() {
    text = document.getElementById('text');
    log = document.getElementById('log');
    log.innerHTML = 'start';

    text.onfocus = select;
}
</script>
</head>
<body>
<input type="text" id="text" readonly="readonly" value="hello, world">
<div id="log">
</div>
</body>
</html>

我多次重复以下实验。

单击文本框外的某处以模糊文本框。
单击文本框以聚焦文本框。

我希望每次在第 2 步结束时，都应该选择文本框中的字符串“hello, world”。然而，这不是我观察到的。在 Debian GNU/Linux (Wheezy) 上使用 Iceweasel 11.0，在替代实验结束时“hello, world”未被选中。在剩下的实验中，有时我看到字符串“hello, world”完全被选中，有时被部分选中。在 Debian GNU/Linux (Wheezy) 上使用 Chrome 18.0.1025.33 测试版，我很少得到想要的结果。大多数时候，没有选择任何内容。

我知道解决这个问题的方法。将 text.onfocus = select 更改为 text.onclick = select。使用onclick 调用的select() 函数，我得到了预期的结果。这是一个演示 URL，它使用“onclick”显示所需的结果：http://jsfiddle.net/5EZwR/

能否请您帮助我理解为什么我使用 'onfocus' 没有得到预期的结果，但使用 'onclick' 得到了它？

【问题讨论】：

这似乎对我有用：stackoverflow.com/questions/281960/…

标签： javascript html onclick onfocus

【解决方案1】：

我认为问题在于.select() 做了两件事：它将选择范围设置为包括所有文本，和它使该字段成为焦点。尽管 Chrome 和 Firefox 的行为不同，但浏览器似乎不喜欢重复选择。

如果你把它改成：

text.setSelectionRange(0, 10000);

然后它可以在 Firefox 中运行。（我认为 Internet Explorer 必须有所不同。）

edit — This Stackoverflow question 有一个很好的答案（Dimitrov 先生的），应该适用于所有浏览器。

【讨论】：

出于好奇，我决定看看.select() 是否会导致输入文本元素的.onfocus 方法被调用。使用jsfiddle.net/WvBAq，我发现它在 Iceweasel 上被调用，但在 Chrome 上却没有。
text.setSelectionRange(0, 10000); 在 IceWeasel 或 Chrome 上似乎都不适合我。这是演示网址：jsfiddle.net/pBAKx
嗯，WebKit 浏览器可能还有其他一些 API。该功能存在于 Firefox 中。我会看看我能找到什么。