在将文本写入文本区域时更新 DIV
[英] Updating a DIV while writing text into a textarea
本文介绍了在将文本写入文本区域时更新 DIV的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想使用用户在文本区域中输入的文本实时"更新页面中的 DIV.我有以下标记
<div id="previewNote" class="note Yellow" style="left:25;top:25px;z-index:1;"><div class="body"></div><div class="作者"></div><span class="data"></span>
并编写了这个 jQuery 代码
/* 在添加注释"表单的字段上监听键盘事件:*/$("[ID$=NoteText]").live('keyup', function(e) {如果(!this.preview)this.preview = $("[ID$=previewNote]");/* 将预览的文本设置为预览的内容输入字段,并剥离所有 HTML 标签:*/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"><!-- 预览:--><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 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">数据</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">
</表单>
但是,听着,我已经更改了
中的 jQuery 代码
/* 在添加注释"表单的字段上监听键盘事件:*/$("[ID$=NoteText]").live('keyup', function(e) {/* 将预览的文本设置为预览的内容输入字段,并剥离所有 HTML 标签:*/$("[ID$=previewNote]").find(".body").html($(this).val().replace(/<[^>]+>/ig, ''));});
一切正常!!!:O
很奇怪...
解决方案
使用此 HTML:
<div id="previewNote";class =注意黄色"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(功能(e){preview.text(input.val());});});
...对我来说效果很好,也不需要剥离标签.
编辑
这对我来说也很好用:
jQuery(function($) {$('#NoteText').live('keyup', function(e) {$('#previewNote div.body').text($(this).val());});});
I would like to "live" update a DIV in the page with the text the user enter in a textarea.
I have the following markup
<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>
and wrote this jQuery code
/* 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, ''));
});
But the div does not get updated. What do am I missing?
thanks!
EDIT
This is the form.
<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>
but, listen, I have changed the jQuery code in
/* 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, ''));
});
and everything works!!! :O
It is very strange...
解决方案
Using this 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>
and this JS:
jQuery(function($) {
var input = $('#NoteText'),
preview = $('#previewNote div.body');
input.keyup(function(e) {
preview.text(input.val());
});
});
...works fine for me, and no need to strip tags either.
EDIT
This also works fine for me:
jQuery(function($) {
$('#NoteText').live('keyup', function(e) {
$('#previewNote div.body').text($(this).val());
});
});
这篇关于在将文本写入文本区域时更新 DIV的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!