有没有办法识别何时使用jQuery将文本拖放到输入元素中?

时间:2013-05-07 15:58:07

标签: javascript jquery html

通常,当标记的文本被拖放到HTML输入元素中时,标记的文本将复制到该输入字段中的光标位置(并添加到任何现有文本)。我想使用jQuery改变这种行为,使其类似于(例如)Firefox地址字段的行为,即:

  • 可以通过键入(像往常一样)来添加和修改文本。
  • 当文本从外部拖动并放入输入元素时,输入中的所有现有文本都将被拖动的文本替换。
  • 当在输入字段中拖放文本时,拖动的文本将移动到光标的位置。 (很棒的功能,但不是那么重要)

有谁知道实现这个目标的方法?任何帮助表示赞赏。

在我看来,为此,我需要认识到某种"拖放"事件和访问拖动的文本,虽然我不知道这是否可能。我想到的场景的(非功能性)模型如下所示:

HTML:

<p>drag-and-drop text into this:</p>
<input id="giveittome" value="some text"></input>
<p>other text</p>
<p>more text</p>
<p>whatever</p>

JavaScript的:

$('#giveittome').on('drag-and-drop' , function (event) {
    $(this).val(event.getDraggedText());
});

source @ jsFiddle

1 个答案:

答案 0 :(得分:5)

试试这个:(它适用于大多数现代浏览器)

$('input').on('keydown change paste drop',function(event) {
    var _this = this;
    setTimeout(function() {
        console.log(_this.value, event.type);
    }, 0); //this timeout is necessary  to get the value
});

小提琴:http://jsfiddle.net/maniator/7skY7/