Question

我正在尝试在onFocus上完全选择HTML文本框的内容。

我知道在组件上放置onfocus="this.select()"的简单解决方案，但这不是一个好的解决方案，因为如果用户双击该区域，选择就会丢失，而在Chrome等浏览器中很少像它一样工作应该只是恢复到输入形式。

我在Google上搜索了一段时间，找不到一个好的解决方案，大多数建议都是这个简单的解决方案。

我希望文本框中的选择在选择后不会更改，如果可能，用户应该无法编辑文本框的内容，例如，如果您在从AdSense获取代码时使用了AdSense选择永远不会改变，你无法改变文本框中的代码。

任何解决方案都将不胜感激。

Answer 1

听起来您希望文本框是只读的。但是，我想说防止用户更改选择是一个坏主意：它给用户带来了困惑和不便，所以我没有实现。以下内容将在所有浏览器中聚焦时选择输入内容，输入为只读：

<input type="text" id="foo" readonly value="Some text">

<script type="text/javascript">
    var textBox = document.getElementById("foo");
    textBox.onfocus = function() {
        textBox.select();

        // Work around Chrome's little problem
        textBox.onmouseup = function() {
            // Prevent further mouseup intervention
            textBox.onmouseup = null;
            return false;
        };
    };
</script>

Answer 2

我通过 Tim Down 更改代码以使其按预期方式工作，这是其他人的最终代码（确保在 readOnly 中大写O）

<script type="text/javascript">
    function selectAll(id) {
        var textBox = document.getElementById(id);
        textBox.select();
        textBox.readOnly = true;
        textBox.onmouseup = function() {
            textBox.select();
            return false;
        };
        textBox.onmousedown = function() {
            textBox.select();
            return false;
        };
    };
</script>

Answer 3

<html>
<body>
<script>
function getElement(elemname)
{
 if (document.getElementById)
  return document.getElementById(elemname);
 else if (document.all)
  return document.all[elemname];
 return 0;
}
function lockingSelect()
{
 ta = getElement("mytext");
 ta.select();
 ta.readonly = true;

}
</script>


<textarea id = "mytext"></textarea>

<br>
<input type=button onclick="lockingSelect();" value="lock"/>
</body>

</html>

在文本框中选择所有文本的稳健方法

3 个答案: