в javascript, как иметь текстовую область только для чтения и все еще получать события onselect? - PullRequest
2 голосов
/ 19 сентября 2011

Я заметил, что если я установил textarea на «только чтение», я больше не получаю события onselect.

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

Мне нужно, чтобы текстовое поле было доступно только для чтения и получало уведомление, когда пользователь выбирает определенный диапазон.Может ли кто-нибудь помочь?

Ответы [ 3 ]

0 голосов
/ 19 сентября 2011

Вы можете создать функцию цикла, которая будет проверять выделение текста в окне. Если он обнаружит, что длина выделенного текста достигла какого-то предела, он выполнит то, что посчитает нужным.

Примерно так:

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

Вам также необходимо убедиться, что выбранная вами текстовая область.

Надеюсь, это укажет вам правильное направление.

0 голосов
/ 20 сентября 2011

Не существует простого способа сделать это, динамически настраивая атрибут readonly текстовой области onfocus, onblur, onselect и т. Д., В то же время всегда получая событие onselect.

Если ваша цель - убедиться, что пользователи не могутредактировать / манипулировать текстовой областью, тогда я, вероятно, просто оставил бы текстовую область как не предназначенную только для чтения (для получения событий выбора), но заблокировал бы весь пользовательский ввод внутри нее, используя protectDefault () для событий ввода, например:

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);
0 голосов
/ 19 сентября 2011

Как насчет использования <div>? Вы по-прежнему можете выделять текст там, и он будет недоступен для редактирования, поэтому доступен только для чтения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...