jquery – 在将文本写入textarea时更新DIV

前端之家收集整理的这篇文章主要介绍了jquery – 在将文本写入textarea时更新DIV前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我希望“生活”使用用户在textarea中输入的文本更新页面中的DIV.
我有以下标记
  1. <div id="previewNote" class="note yellow" style="left:25;top:25px;z-index:1;">
  2. <div class="body"></div>
  3. <div class="author"></div>
  4. <span class="data"></span>
  5. </div>

并编写了这个jQuery代码

  1. /* Listening for keyup events on fields of the "Add Note" form: */
  2. $("[ID$=NoteText]").live('keyup',function(e) {
  3. if (!this.preview)
  4. this.preview = $("[ID$=previewNote]");
  5.  
  6. /* Setting the text of the preview to the contents of the
  7. input field,and stripping all the HTML tags: */
  8. this.preview.find(".body").html($(this).val().replace(/<[^>]+>/ig,''));
  9.  
  10. });

但div没有得到更新.我错过了什么?

谢谢!

编辑
这是表格.

  1. <form action="/Note/SaveOrDelete" id="crudForm" method="post"><input id="IssueNoteID" name="IssueNoteID" type="hidden" value="0">
  2.  
  3. <!-- The preview: -->
  4. <div id="previewNote" class="note yellow" style="left:25;top:25px;z-index:1;">
  5. <div class="body"></div>
  6. <div class="author">admin</div>
  7. <span class="data"></span>
  8. </div>
  9.  
  10. <div style="margin: 16px 0px 0px 180px; width: 240px;">
  11. <table border="0" cellpadding="3" cellspacing="1" width="100%">
  12. <tbody><tr valign="top">
  13. <td colspan="2">
  14. <label for="NoteText">Testo</label>
  15. <br>
  16. <textarea cols="30" id="NoteText" name="NoteText" rows="6"></textarea>
  17. </td>
  18. </tr>
  19. <tr valign="top">
  20. <td colspan="2" align="right">
  21. <label for="NoteDate">Data</label>
  22. <input id="noteDate" name="noteDate" style="width: 120px" type="text" value="" class="hasDatepicker">
  23. </td>
  24. </tr>
  25. </tbody></table>
  26. <div style="text-align:right;">
  27. <input type="submit" id="btnSave" value="Salva" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false">
  28. </div>
  29. </div>
  30. </form>

但是,听着,我已经改变了jQuery代码

  1. /* Listening for keyup events on fields of the "Add a note" form: */
  2. $("[ID$=NoteText]").live('keyup',function(e) {
  3. /* Setting the text of the preview to the contents of the
  4. input field,and stripping all the HTML tags: */
  5. $("[ID$=previewNote]").find(".body").html($(this).val().replace(/<[^>]+>/ig,''));
  6. });

一切正常! :o

这很奇怪……

解决方法

使用此HTML:
  1. <textarea id="NoteText"></textarea>
  2.  
  3. <div id="previewNote" class="note yellow" style="left:25;top:25px;z-index:1;">
  4. <div class="body"></div>
  5. <div class="author"></div>
  6. <span class="data"></span>
  7. </div>​​​

这个JS:

  1. jQuery(function($) {
  2. var input = $('#NoteText'),preview = $('#previewNote div.body');
  3.  
  4. input.keyup(function(e) {
  5. preview.text(input.val());
  6. });
  7. });​

…对我来说很好,也不需要剥离标签.

编辑

这对我来说也很好:

  1. jQuery(function($) {
  2. $('#NoteText').live('keyup',function(e) {
  3. $('#previewNote div.body').text($(this).val());
  4. });
  5. });​

猜你在找的jQuery相关文章