Question

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

例如，在此网站上，当您提出问题时，您的文字会直接显示在底部。或者在此网站http://demo.tutorialzine.com/2010/01/sticky-notes-ajax-php-jquery/demo.php上添加备注时，您可以立即在左侧看到粘性效果。

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

亲切的问候

Answer 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;
}

Answer 2

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

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

除了saml

建议的更改事件外，还编辑了响应键盘事件

Answer 3

通常，分配JavaScript函数来处理表单输入的keyup事件。该函数选择页面上的另一个元素，并将该元素的innerText属性设置为表单输入的当前值（后键控）。

“预览”的其余部分，例如http://demo.tutorialzine.com/2010/01/sticky-notes-ajax-php-jquery/demo.php处的便利贴颜色，或者您在此处看到的 文字格式 ，可以通过处理函数应用的内联样式，也可以通过CSS或两者的组合来完成。

我在一个你可以玩的小提琴中设置了一个简单的例子：http://jsfiddle.net/95nyp/1/模仿http://demo.tutorialzine.com/2010/01/sticky-notes-ajax-php-jquery/demo.php

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

立即显示表格输入

3 个答案: