Question

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

代码的副本如下：

<!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。使用select()调用的onclick函数，我得到了预期的结果。这是一个演示网址，使用“onclick”显示所需的结果：http://jsfiddle.net/5EZwR/

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

Answer 1

我认为问题在于.select()做了两个事情：它将选择范围设置为包含所有文本，和导致字段为聚焦。虽然Chrome和Firefox表现不同，但浏览器似乎不喜欢重复选择。

如果您将其更改为：

text.setSelectionRange(0, 10000);

然后它适用于Firefox。（我认为它必须与Internet Explorer不同。）

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

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

1 个答案: