jquery中的事件文本更改答案

【问题标题】：event textchange in jqueryjquery中的事件文本更改
【发布时间】：2011-07-11 14:37:24
【问题描述】：

场景

我有一个文本区域和一个 div 下方，用于预览用户在文本区域中所写的内容。 elementr div 中的预览是使用事件keyup

问题

我允许用户将列表的某些字段拖放到文本区域，当用户将元素拖放到文本区域时，我无法进行预览，直到用户进行输入。那是因为与 textarea 关联的事件是 keyup，所以我想知道当用户将元素放在 textarea 中时我可以使用的女巫事件，我可以获得该值并将其显示在 div 中。

谢谢

更新

代码

html

<div id="divFields">
    <ul class="fieldStyle">
        <li class="ui-draggable">Prueba</li>
    </ul>
</div>  
<textarea id="txtMessageFields" name="txtMessageFields" class="required" cols="20" rows="2"></textarea>
<div id="messagePreview"></div>

/*****The called to the method that make the preview***/
$("#txtMessageFields").keyup(previewData);

/****Adding the drag and drop Event handler*****/
$("#divFields li").draggable({
    helper: "clone"
});


$("#divDroppedFields").droppable({
    accept: "#divFields li",
    drop: function (event, ui) {
        messageValue = '';
        messageValue = messageValue + $("#txtMessageFields").val();
        $("#txtMessageFields").val('');
        messageValue = messageValue + ' #' + ui.draggable.text() + '! ';
        $(this).find('#txtMessageFields').val(messageValue);
    }

/***Manage the preview about the user writing values ****/
function previewData() {
    $messageValues.html('');
    var aux = this.value.replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '<br>');
    aux = aux.replace(/#/g, '<span class="fieldText">');
    aux = aux.replace(/!/g, '</span>');
   aux = '<p>' + aux + '</p>'
   if (aux)
        displayMessage = aux;

   $messageValues.append(aux);

}

【问题讨论】：

见stackoverflow.com/questions/472498/…
对我来说有点不清楚...将您的问题分为两部分：1.有关您的任务的先决条件和信息（包括代码的相关部分），以及 2.您想要实现的目标以及到目前为止您尝试过的内容
@Simeon 我修改了问题以使其更清晰
不错！ :) 它将帮助未来的读者理解您的问题

标签： jquery drag-and-drop jquery-ui-draggable

【解决方案1】：

你可以替换下面的代码并尝试一下吗？拖动完成后，我正在尝试触发 textarea 的 keyup 事件。

$("#divDroppedFields").droppable({
    accept: "#divFields li",
    drop: function (event, ui) {
        messageValue = '';
        messageValue = messageValue + $("#txtMessageFields").val();
        $("#txtMessageFields").val('');
        messageValue = messageValue + ' #' + ui.draggable.text() + '! ';
        $(this).find('#txtMessageFields').val(messageValue).trigger('keyup');
    }

【讨论】：

【解决方案2】：

试试这个

$("textarea").mouseup(function(){ //code to update the preview container; });

【讨论】：

嗨，感谢您的提问，给我 5 分钟的时间来尝试代码，我会告诉您它是否有效
拖动完成时是否触发事件？你能把你的示例代码放上来吗？
请给我第二个@ShankarSangoli
@Jorge - 我添加了另一个答案，请看一下，谢谢。

【解决方案3】：

Google Chrome、Firefox 和 IE 9+ 支持名为 'dragstart'、'ondragenter'、'ondragover' 的事件。

另外，我认为你可以使用 jQuery UI：http://jqueryui.com/demos/droppable/

【讨论】：