我希望“生活”使用用户在textarea中输入的文本更新页面中的DIV.
我有以下标记
我有以下标记
<div id="previewNote" class="note yellow" style="left:25;top:25px;z-index:1;"> <div class="body"></div> <div class="author"></div> <span class="data"></span> </div>
并编写了这个jQuery代码
/* Listening for keyup events on fields of the "Add Note" form: */ $("[ID$=NoteText]").live('keyup',function(e) { if (!this.preview) this.preview = $("[ID$=previewNote]"); /* Setting the text of the preview to the contents of the input field,and stripping all the HTML tags: */ this.preview.find(".body").html($(this).val().replace(/<[^>]+>/ig,'')); });
但div没有得到更新.我错过了什么?
谢谢!
编辑
这是表格.
<form action="/Note/SaveOrDelete" id="crudForm" method="post"><input id="IssueNoteID" name="IssueNoteID" type="hidden" value="0"> <!-- The preview: --> <div id="previewNote" class="note yellow" style="left:25;top:25px;z-index:1;"> <div class="body"></div> <div class="author">admin</div> <span class="data"></span> </div> <div style="margin: 16px 0px 0px 180px; width: 240px;"> <table border="0" cellpadding="3" cellspacing="1" width="100%"> <tbody><tr valign="top"> <td colspan="2"> <label for="NoteText">Testo</label> <br> <textarea cols="30" id="NoteText" name="NoteText" rows="6"></textarea> </td> </tr> <tr valign="top"> <td colspan="2" align="right"> <label for="NoteDate">Data</label> <input id="noteDate" name="noteDate" style="width: 120px" type="text" value="" class="hasDatepicker"> </td> </tr> </tbody></table> <div style="text-align:right;"> <input type="submit" id="btnSave" value="Salva" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false"> </div> </div> </form>
但是,听着,我已经改变了jQuery代码
/* Listening for keyup events on fields of the "Add a note" form: */ $("[ID$=NoteText]").live('keyup',function(e) { /* Setting the text of the preview to the contents of the input field,and stripping all the HTML tags: */ $("[ID$=previewNote]").find(".body").html($(this).val().replace(/<[^>]+>/ig,'')); });
一切正常! :o
这很奇怪……
解决方法
使用此HTML:
<textarea id="NoteText"></textarea> <div id="previewNote" class="note yellow" style="left:25;top:25px;z-index:1;"> <div class="body"></div> <div class="author"></div> <span class="data"></span> </div>
这个JS:
jQuery(function($) { var input = $('#NoteText'),preview = $('#previewNote div.body'); input.keyup(function(e) { preview.text(input.val()); }); });
…对我来说很好,也不需要剥离标签.
编辑
这对我来说也很好:
jQuery(function($) { $('#NoteText').live('keyup',function(e) { $('#previewNote div.body').text($(this).val()); }); });