event textchange in jquery
The scenario
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 keyup
The problem
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 keyup
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.
Thanks
UPDATE
THE CODE
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 js
/*****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开发者_如何学C>' + aux + '</p>'
if (aux)
displayMessage = aux;
$messageValues.append(aux);
}
Can you replace the below piece of code and try it? I am trying to trigger the keyup event of textarea once the drag is complete.
$("#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');
}
Try this
$("textarea").mouseup(function(){ //code to update the preview container; });
there are events called 'dragstart', 'ondragenter', 'ondragover' which are supported by Google Chrome, Firefox and IE 9+.
beside, I think you can jQuery UI: http://jqueryui.com/demos/droppable/
精彩评论