当用户将文本拖动到文本字段时，如何触发JavaScript事件

How to fire JavaScript event when user drags text into textfield?

本文关键字：文本 何触发 JavaScript 事件 字段 用户 拖动      更新时间：2023-09-26

我有一个表单，可以格式化由多个文本字段输入的文本，我希望用户可以键入文本、粘贴文本并将文本放入文本字段。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>

这里是文本输出到的contenteditablediv：

<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中工作即可。

可能还有另一种方法，但您可以在1毫秒的时间内使用setTimeout，它似乎工作得很好：

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

相关文章：