javascript - 当用户将文本拖到文本字段时如何触发 JavaScript 事件？

Question

我有一个格式化由多个文本字段输入的文本的表单，我想让用户可以键入文本、粘贴文本以及将文本拖放到文本字段中。 JavaScript 事件是 format()。

当用户键入文本并粘贴文本时，我使用了 onkeyup="format()，但我不知道什么事件将允许用户选择文本，将其拖放到文本字段上，并触发事件以自动更新格式化文本。我已经尝试过 ondrop、onmouseup 和 onchange一切都无济于事。

我感觉 onmouseup 属性正在工作，但问题是事件在鼠标释放后立即触发，在文本文本字段之前有新的用户文本，所以它看起来好像没有触发，但确实触发了，但文本字段中没有任何内容。这可能吗？如果是这样，我可以使用 setTimeout 来延迟事件延迟 500 毫秒(或其他时间)直到出现文本？

这是 javscript:

<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。