Как получить новое значение поля ввода textarea при вставке? - PullRequest
7 голосов
/ 25 марта 2012

Я вижу, что когда я пытаюсь прочитать значение из поля textarea, когда вызывается его функция onpaste, я получаю старое значение поля (которое было перед операцией вставки), а не новое значениепосле операции вставки).

Вот демонстрация этого поведения: http://jsfiddle.net/qsDnr/

Ниже приведена копия кода:

<!DOCTYPE html>
<html>
<head>
<title>On Paste</title>
<script type="text/javascript">
var textareaElement;
var previewElement;

function update()
{
    previewElement.innerHTML = textareaElement.value;
}

window.onload = function() {
    textareaElement = document.getElementById('textarea');
    previewElement = document.getElementById('preview');
    textareaElement.onpaste = update    
}
</script>
</head>
<body>
<textarea id="textarea">
</textarea>
<div id="preview">
</div>
</body>
</html>

Вы можете подтвердить поведениесо следующими шагами.

  1. Скопируйте строку foo в буфер обмена.
  2. Щелкните правой кнопкой мыши поле textarea и выберите «Вставить».Ничего не появляется в элементе div.
  3. Щелкните правой кнопкой мыши поле textarea и снова выберите «Вставить».В элементе div появляется foo.

Поскольку я хочу, чтобы элемент div всегда отображал то, что было обновлено в элементе textarea с помощью операции вставки, требуемый вывод - foo и foo fooна шаге 2 и шаге 3 соответственно.

Один из способов, которым мне удалось получить желаемый результат, - задержать вызов функции update() с помощью window.setTimeout(), поэтому вместо

textareaElement.onpaste = update    

На этот раз у меня есть

textareaElement.onpaste = function() {
    window.setTimeout(update, 100);
};

(демо: http://jsfiddle.net/cwpLS/).. Это делает то, что я хочу. Однако, это скорее обходной путь, чем прямой способ сделать то, что я хочу.хотел бы знать, есть ли альтернативный или лучший способ сделать это.

Ответы [ 2 ]

3 голосов
/ 25 марта 2012

Я почти уверен, что решение setTimeout - это единственный способ достичь желаемого эффекта или попытаться получить доступ к объекту буфера обмена - что может привести к путанице, если вы собираетесь использовать кросс-браузер и поддержку старого браузера.

0 голосов
/ 25 марта 2012

Нет прямого способа сделать это в кросс-браузерном режиме. См. Ссылку ниже о поведении в Firefox.

Mozilla

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

Также, пожалуйста, взгляните на ссылку на стек переполнения , в которой обсуждаются другие возможности.

...