Как запустить событие Javascript, когда пользователь перетаскивает текст в текстовое поле?

Question

У меня есть форма, которая форматирует текст, который вводится несколькими текстовыми полями, и я хотел бы позволить пользователю набирать текст, вставлять текст и вставлять текст в текстовое поле. Событие javascript - format().

Я использовал onkeyup="format(), когда пользователь вводит текст и вставляет текст, но я не могу понять, какое событие позволит пользователю выбрать текст, перетащить его в текстовое поле и запустить событие, чтобы автоматически обновить форматированный текст. Я пробовал ondrop, onmouseup и onchange все безрезультатно.

У меня такое ощущение, что свойство onmouseup работает, но проблема в том, что событие вызывается сразу после отпускания мыши, до того, как в текстовом поле текста появится новый пользовательский текст, поэтому он выглядит как если оно не сработало, то когда оно действительно сработало, но в текстовом поле ничего не было. Может ли это быть? Если да, могу ли я использовать setTimeout, чтобы отложить событие на 500 миллисекунд (или что-то еще) до появления текста?

Вот код JavaScript:

<script language="JavaScript">
function format() {
     var author = document.form.author.value;
     var credentials = document.form.credentials.value;
     var date = document.form.date.value;
     var publication = document.form.publication.value;
     var title = document.form.title.value;
     var evidence = document.form.evidence.value;
     var tagline = document.form.tagline.value;
     document.getElementById('txtarea').innerHTML = ("<b>" + tagline + "</b>" + "</br >" + "<br />" + "<i>" + "<u>" + author + " " + date + "." + "</u> " + author + " (" + credentials + ") " + date + " " + publication + " " + title + " " + (window.top.getBrowser().selectedBrowser.contentWindow.location.href) + "</i>" + "<br />" + "<br />" + evidence);}
function clearForm() {
     document.getElementById('txtarea').innerHTML = "";
}
</script>

Вот одно из 7 текстовых полей, которые у меня есть (у меня есть onkeyup, который охватывает тип и вставку, но я не знаю, что использовать для перетаскивания):

<form class="right_aligned" name="form" method="get" action="" id="form"   onkeyup="format()" onmouseup="format()" ondrop="format()">

<div style="float: left;"><input ondblclick="this.value=''" type="text" name="publication" value="Publication..." id="publication" style="border:1px solid;border-color:#B0B0B0;width:225px;padding:4px;margin:10px;color: #000;"  
ondrop="format()" ondragover="{this.value=''; this.style.color='#000';}" onfocus="if (this.value==this.defaultValue) {this.value=''; this.style.color='#000';}"  onblur="if(this.value=='') {this.value=this.defaultValue; this.style.color='#000';}"></div>

... и вот contenteditable div, в который выводится текст:

<div CONTENTEDITABLE id="txtarea" ondblclick="document.execCommand('selectAll',false,null);" style="float:left;overflow:auto;padding:5px;background-color:#FFF;border:1px solid;border-color:#B0B0B0;outline:none;width:213px;height:260px;font-size:.75em;margin-left:10px;margin-right:10px;margin-bottom:10px;margin-top:5px" type="text"></div>

Кстати, это расширение для Firefox, поэтому кросс-браузер не проблема. Это просто должно работать в Firefox.

Answer 1

Может быть другой выход, но вы можете использовать setTimeout с интервалом в 1 миллисекунду, и, кажется, он работает просто отлично:

<p>Duis nunc nisl, luctus nec auctor id, iaculis eu nibh. Nunc odio velit, pretium et scelerisque eget, auctor eget erat. Cras id nulla nec odio vestibulum egestas ac in mi. Vivamus mollis suscipit condimentum. Sed laoreet eros ut lorem tempor porttitor. Etiam eget erat at lacus facilisis aliquam eget id purus.</p>
<br/>
<textarea ondrop="formatOnDrop(this)" onchange="formatOnChange(this)" id="textarea"></textarea>
<br/>
<input type="text" id="inputtext" ondrop="formatOnDrop(this)" onchange="formatOnChange(this)"/>

function formatOnDrop(el){
    formatElement = el;
    //alert('ondrop: ' + el.id + ' was changed to ' + el.value);
    setTimeout(function(){format()},1);
}
function formatOnChange(el){
    formatElement = el;
    //alert('onchange: ' + el.id + ' was changed to ' + el.value);
    setTimeout(function(){format()},1);
}
function format() {
    alert('format: ' + formatElement.id + ' was changed to ' + formatElement.value);
}

http://jsfiddle.net/rREsh/3/

Примечание, функция formatOnChange() никогда не вызывается при выделении и отбрасывании текста, но срабатывает onblur при копировании и вставке.