立即显示表单输入答案

【问题标题】：Displaying form input instantly立即显示表单输入
【发布时间】：2012-10-04 18:17:19
【问题描述】：

我想知道您如何直接显示用户输入的表单输入。

例如在这个网站上，当您提出问题时，您的文字直接显示在底部。或者就像在这个网站上http://demo.tutorialzine.com/2010/01/sticky-notes-ajax-php-jquery/demo.php 一样，当您添加注释时，您可以立即在左侧看到您的便签的外观。

我认为这是用 javascript 完成的，但我不知道如何

亲切的问候

【问题讨论】：

标签： php javascript html forms input

【解决方案1】：

你可以使用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;
}

【讨论】：

而不是keyup，keypress 可能会更好，因为它还可以捕获按住键的字符。
我是这么想的，但他在问题中提到的网站与 keyup 的行为相同。
如果您正在尝试使用 jsfiddle，如果您对 JavaScript 进行了更改，请务必单击更新按钮。编辑：并且它没有被任何标准所涵盖，它可能不适用于某些浏览器，并且默认仅在 keyup 上触发。
这太棒了！但是如何使它们彼此不同呢？例如，当我有 5 个文本输入时
@SamHendrickx 你的意思是 textarea 和 div 的区别吗？您可以使用 CSS 随意装饰 textarea 和 div。

【解决方案2】：

<input id="example_input" type="text"/>
<div id="content_receiver">

$("#example_input").bind("keyup change", function() { 
    $("#content_receiver").html($(this).val())
})

编辑以响应 saml 建议的更改事件之外的 keyup 事件

【讨论】：

change 仅在输入因内容更改而失去焦点时才会触发。这不会随着按键而改变。

【解决方案3】：

通常，分配一个 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

请记住，这不是深入解释的原因是有许多方法可以实现这一点，而这个答案只是更简单的方法之一。

【讨论】：