javascript - 立即将表单输入值克隆为文本

Question

是否可以从

<textarea id="text"></textarea>

和

<input id="name" type="input" />

作为纯文本立即转换为 div 或段落标签？

示例：如果输入“123”，它将立即将“123”克隆到 div 中。

Answer 1

您应该在处理程序keyup上和内部使用事件textarea/input更新div/p标签的值textarea/input

例子：

$('#mytextarea').keyup(function () {
   $('#myDiv').text(this.value);
});

注意：请参阅其他答案以在按下键且未释放时更新 div。

Answer 2

是的，使用 keydown 事件和 10 毫秒的短暂延迟（或者可能更短，任何小于 30 的延迟都不会被用户注意到）。

$("#text").on("keydown",function(){
    setTimeout(
        // proxy callback to `this` rather than `window`
        $.proxy(function(){ 
            $("#target").text(this.value);
        },this)
    ,10);
});

演示：http: //jsfiddle.net/7Qrug/

编辑：如果你不喜欢或不理解$.proxy，也可以写成：

$("#text").on("keydown",function(){
    var that = this;
    setTimeout(function(){ 
        $("#target").text(that.value);
    },10);
});

Answer 3

旧浏览器和现代浏览器的使用keyup和事​​件。keypressinput

jQuery('#text').on("keyup keypress", function() {
    jQuery("#div").text(this.value);
});

演示- keyup/keypress
演示- 输入