2012-03-25 7 views
7

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

Вот демонстрация этого поведения: 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 и выберите «Вставить» еще раз. foo появляется в элементе div.

Так как я хочу, чтобы элемент DIV всегда показывать, что было обновлено в TEXTAREA элементе с использованием операции вставки, желаемый выход foo и foo foo на стадии 2 и стадии 3 соответственно.

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

textareaElement.onpaste = update  

Я получил

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

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

+0

[Это событие] (https://developer.mozilla.org/en/DOM/element.onpaste) отправляется, когда пользователь * пытается * вставлять текст - может означать, что onpaste запускается до вставки текста. – Joseph

+0

'event.clipboardData.getData ('text/plain')' позволяет получать контент, будет вставлен, но я не уверен, что он доступен в каждом браузере, и текущий текст и выбор также должны быть приняты во внимание. Боюсь, вам нужно будет использовать таймаут или отслеживать 'onkeyup' /' onmouseup'. – kirilloid

+0

@Joseph Я согласен.Я пытаюсь понять, если проблема, которую я пытаюсь решить, лучше всего решить с помощью 'setTimeOut', как я объяснил в этом сообщении, или если есть более эффективные способы решения этой проблемы. –

ответ

3

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

0

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

Mozilla

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

Также обратите внимание на stackoverflow link, где обсуждаются другие возможности.

Смежные вопросы