Databases
StackOverflow2013
Postsdbo
POevent textchange in jquery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POevent textchange in jquery
    text
    copied!<p><strong>The scenario</strong> </p> <p>I'm have a text area and below a div to preview what the user it's writing in the text area. The preview in the elementr div it's made with the event <code>keyup</code></p> <p><strong>The problem</strong> </p> <p>I allow to the user to drag and drop some fields of the list into the text area and when the user drop the element in the text area i can't make a preview until the user do an input. That's because the event associate to the textarea it's a <code>keyup</code> so i want to know witch event i can use when the user drop the element in the textarea i can get the value and show it in the div.</p> <p>Thanks</p> <p><strong>UPDATE</strong></p> <p><strong>THE CODE</strong></p> <p>html</p> <pre><code>&lt;div id="divFields"&gt; &lt;ul class="fieldStyle"&gt; &lt;li class="ui-draggable"&gt;Prueba&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;textarea id="txtMessageFields" name="txtMessageFields" class="required" cols="20" rows="2"&gt;&lt;/textarea&gt; &lt;div id="messagePreview"&gt;&lt;/div&gt; </code></pre> <p>the js</p> <pre><code>/*****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(/([^&gt;\r\n]?)(\r\n|\n\r|\r|\n)/g, '&lt;br&gt;'); aux = aux.replace(/#/g, '&lt;span class="fieldText"&gt;'); aux = aux.replace(/!/g, '&lt;/span&gt;'); aux = '&lt;p&gt;' + aux + '&lt;/p&gt;' if (aux) displayMessage = aux; $messageValues.append(aux); } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload