我想知道您如何直接显示用户输入的表单输入。
例如,在这个网站上,当您提出问题时,您的文字直接显示在底部。或者像这个网站http://demo.tutorialzine.com/2010/01/sticky-notes-ajax-php-jquery/demo.php当你添加一个注释时,你可以立即在左边看到你的粘性如何看。
我认为这是用 javascript 完成的,但我不知道如何
亲切的问候
我想知道您如何直接显示用户输入的表单输入。
例如,在这个网站上,当您提出问题时,您的文字直接显示在底部。或者像这个网站http://demo.tutorialzine.com/2010/01/sticky-notes-ajax-php-jquery/demo.php当你添加一个注释时,你可以立即在左边看到你的粘性如何看。
我认为这是用 javascript 完成的,但我不知道如何
亲切的问候
您可以使用 jQuery.keyup 事件jsfiddle
$("textarea").keyup(function(){
$('div div').html(this.value);
});
$("input").keyup(function(){
$('div span').html(this.value);
});
HTML
<textarea ></textarea>
<input />
<div >
<div></div>
<span></span>
</div>
CSS:
div{
position: relative;
width: 150px;
height:100px;
}
span{
position:absolute;
right:3px;
bottom:3px;
}
<input id="example_input" type="text"/>
<div id="content_receiver">
$("#example_input").bind("keyup change", function() {
$("#content_receiver").html($(this).val())
})
编辑以响应 saml 建议的更改事件之外的 keyup 事件
通常,分配一个 JavaScript 函数来处理keyup
表单输入的事件。该函数选择页面上的另一个元素并将innerText
该元素的属性设置为表单输入的当前值(keyup 后)。
“预览”的其余部分,例如http://demo.tutorialzine.com/2010/01/sticky-notes-ajax-php-jquery/demo.php上的便利贴颜色 ,或文本格式您在这里看到的 SO,是通过处理函数应用的内联样式或 CSS 或两者的组合来完成的。
我在你可以玩的小提琴中设置了一个简单的例子:http: //jsfiddle.net/95nyp/1/模拟http://demo.tutorialzine.com/2010/01/sticky-notes-ajax- php-jquery/demo.php
Please keep in mind that the reason this is not an in-depth explanation is that there are many ways to accomplish this, and this answer is merely one of the more simple ways.