我希望“生活”使用用户在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());
- });
- });