在JavaScript中，如何拥有一个只读文本区，并仍然获得onselect事件

In JavaScript how to have a readonly textarea and still get onselect events?

本文关键字：onselect 事件 只读 JavaScript 何拥 有一个 文本区      更新时间：2023-09-26

我注意到，如果我将textarea设置为'readonly'我不再得到onselect事件。

var ta = document.createElement('textarea');
ta.readonly = true;
ta.onselect = function() { ... } // This one works only if the ta.readonly is commented out.

我需要文本区域是只读的，并在用户选择某个范围时得到通知。有人能帮忙吗?

动态调整文本区域的只读属性onfocus, onblur, onselect等，同时仍然总是接收onselect事件，这是没有直接的方法来做到这一点的。

如果你的目标是确保用户不能编辑/操作文本区域，那么我可能只是离开文本区域为非只读(接收选择事件)，但通过使用preventDefault()在输入事件中阻止所有用户输入，像这样:

var ta = document.createElement('textarea');
// prevent user input
ta.addEventListener('cut', function(e) { e.preventDefault(); }, false);
ta.addEventListener('copy', function(e) { e.preventDefault(); }, false);
ta.addEventListener('paste', function(e) { e.preventDefault(); }, false);
ta.addEventListener('keydown', function(e) { e.preventDefault(); }, false);
// listen for user selections
ta.addEventListener('select', function() {
    // function logic...
}, false);

用<div>怎么样?你仍然可以在这里选择文本，它是不可编辑的，因此是只读的

您可以创建一个循环函数来持续检查窗口文本选择。如果它检测到所选文本的长度已达到某种限制，它将执行您认为合适的任何操作。

像这样:

function getSelectedText() {
    var txt = '';
    if (window.getSelection) {
        txt = window.getSelection();
    } 
    else if (document.getSelection) // FireFox
    {
        txt = document.getSelection();
    }
    else if (document.selection)  // IE 6/7
    {
        txt = document.selection.createRange().text;
    }
    return txt;
}
function doSomething() {
    var txt = getSelectedText();
    // Do something with txt variable, like txt.length
}
setInterval('doSomething()',500);

您还需要确保选择来自所需的文本区域。

相关文章：