Javascript 选择文本框中所有文本的健壮方法_Javascript_Html_Xhtml

Javascript 选择文本框中所有文本的健壮方法

javascript html

Javascript 选择文本框中所有文本的健壮方法,javascript,html,xhtml,Javascript,Html,Xhtml,我试图让HTML文本框的内容完全集中在焦点上我知道在组件上放置一个onfocus=“this.select（）”的简单解决方案，但这不是一个好的解决方案，因为如果用户双击该区域，选择就会丢失，并且在chrome等浏览器中，它很少正常工作，只是恢复为输入形式我在谷歌上搜索了一段时间，没有找到一个好的解决方案，大多数建议都是这个简单的解决方案我希望文本框内的选择在被选择后不会改变，如果可能的话，用户应该不能编辑文本框的内容，例如，如果你从AdSense抓取代码时使用了AdSense，那么选择永

我试图让HTML文本框的内容完全集中在焦点上

我知道在组件上放置一个

onfocus=“this.select（）”

的简单解决方案，但这不是一个好的解决方案，因为如果用户双击该区域，选择就会丢失，并且在chrome等浏览器中，它很少正常工作，只是恢复为输入形式

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

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

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


<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>

函数getElement（elemname）
{
if（document.getElementById）
返回文档.getElementById（elemname）；
else if（document.all）
返回文件。全部[元素名称]；
返回0；
}
函数锁定选择（）
{
ta=getElement（“mytext”）；
ta.select（）；
ta.readonly=true；
}

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

<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>


var textBox=document.getElementById（“foo”）；
textBox.onfocus=函数（）{
textBox.select（）；
//解决Chrome的小问题
textBox.onmouseup=函数（）{
//防止进一步的鼠标干预
textBox.onmouseup=null；
返回false；
};
};

我通过修改Tim Down来修改代码，以使其按应有的方式工作，以下是其他人的最终代码（请确保在只读中大写O）


功能selectAll（id）{
var textBox=document.getElementById（id）；
textBox.select（）；
textBox.readOnly=true；
textBox.onmouseup=函数（）{
textBox.select（）；
返回false；
};
textBox.onmousedown=函数（）{
textBox.select（）；
返回false；
};
};

这样做效果更好，但如果不是快速双击的话，第二次单击时仍会恢复选择。@Emil:事实上，我认为这比您的解决方案好，并且我很小心地按照我的方式实施了它：我认为阻止用户更改选择完全是一种混乱和过分规范的做法。用户希望能够从网页中选择和复制他们喜欢的内容。Tim，这一点的全部目的是限制这种能力，因为有时候他们复制的是他们不应该修改的内容，比如说网页的跟踪代码。如果他们不小心修改了代码或者没有选择全部代码，它将无法正常工作。我可以理解你的观点，尽管显然没有什么可以阻止用户将内容粘贴到文本编辑器中并对其进行修改。这在很大程度上取决于品味：我更喜欢尽可能少地改变熟悉控制的预期行为。

<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>