如何启用和禁用<textarea>使用JavaScript

How to enable and disable selecting of <textarea> with JavaScript

本文关键字：textarea JavaScript 使用 何启用 启用      更新时间：2023-09-26

我想知道如何禁用和启用JavaScript元素的突出显示(文本选择)?

我想要一些类似readonly的属性，在那里我可以做

element.readOnly = true|false

只有它会禁用或启用该字段中的文本高亮显示。

有办法做到这一点吗?

谢谢

我相信用CSS/JS可以做到这一点。这里有一些方法可能对你有用:

CSS: 

*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

对于ie10以下版本和Opera浏览器，您将需要使用您希望被取消选择的元素的unselectable属性。你可以使用HTML中的一个属性来设置:

．..

这个属性是不可继承的，所以必须在元素的开始标记中添加一个属性。您可以使用JavaScript对元素的子元素递归地执行此操作:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}
makeUnselectable(document.getElementById("foo"));

我还发现了这里描述的其他方法。

我确实发现这种方法在chrome中不起作用:"这对加载为chrome的内容没有任何影响"。但是，有一个已知的jquery解决方案具有更好的兼容性，它看起来像:

$('textarea')
    .attr('unselectable', 'on')
    .css('-webkit-user-select', 'none')
    .css('-moz-user-select', 'none')
    .css("-ms-user-select","none")
    .css("-o-user-select","none")
    .css("user-select",'none')
    .on('selectstart', false)
    .on('mousedown', false);

如果您仍然遇到无法选择文本的问题，您可以执行onselect函数，取消选择。

设置为只读并不妨碍用户选择文本。为此，您需要将selectstart事件绑定到textarea上，并通过返回false;来取消它。

试试这个:

<textarea onselect="return false;"></textarea>

请注意，可能会有一些浏览器不一致-而且这对用户来说可能非常烦人…

相关文章：