onclick vs. onfocus - 输入文本选择行为不同.为什么?

Sus*_*Pal 5 html javascript onclick onfocus

我看到当我在'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>
Run Code Online (Sandbox Code Playgroud)

我多次重复以下实验.

  1. 单击文本框外部的某个位置以模糊文本框.
  2. 单击文本框以聚焦文本框.

我希望每次在第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 = selecttext.onclick = select.使用select()调用的函数onclick,我得到预期的结果.这是一个演示URL,使用'onclick'显示所需的结果:http://jsfiddle.net/5EZwR/

你能不能帮我理解为什么我没有通过'onfocus'得到预期的结果但我用'onclick'得到它?

Poi*_*nty 2

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

如果你把它改成:

text.setSelectionRange(0, 10000);
Run Code Online (Sandbox Code Playgroud)

然后它就可以在 Firefox 中运行了。(我认为对于 Internet Explorer 来说它必须有所不同。)

编辑这个 Stackoverflow 问题有一个很好的答案(Dimitrov 先生的),应该适用于所有浏览器。