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。

当用户将文本拖入文本字段时如何触发Javascript事件？

1 个答案: