Question

我想知道如何使用JavaScript禁用和启用元素突出显示（文本选择）？

我想要像readonly属性，我可以做的事情

element.readOnly = true|false

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

有办法做到这一点吗？

由于

Answer 1

我相信可以用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;
}

对于低于10的IE浏览器和Opera浏览器，您需要使用您希望不可选择的元素的不可选属性。您可以使用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"));

我还发现了here所述的其他方法。

我确实发现此方法在chrome中不起作用：＆＃34;这对于作为chrome＆＃34;加载的内容没有任何影响。但是，有一个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);

如果您仍然遇到能够选择文本的问题，您可以执行取消选择功能，取消选择。

Answer 2

将其设为只读不会阻止用户选择文本。要做到这一点，你需要在textarea上绑定selectstart事件并通过返回false取消它;。

试试这个：

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

请注意，可能存在一些浏览器不一致的问题 - 以及这对用户来说非常烦人的事实......

如何启用和禁用使用JavaScript </textarea>选择<textarea>

2 个答案: