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

是否可以从中克隆值

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

及

是否立即将纯文本转换为div或段落标记

示例：如果输入123，它会毫不延迟地将123克隆到div中。

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

例如：

---

注意：请参阅其他答案，以了解在按下键但未释放时更新div的信息。

是的，使用keydown事件和10毫秒或更短的延迟，任何小于30毫秒的延迟都不会被用户察觉

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

演示：

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

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

对旧浏览器使用keyup和keypress事件，对现代浏览器使用input

-按键/按键

---

-input

为什么选择keydown/delay而不是keyup？因为keyup只会在用户释放键时触发，如果用户按住键超过一秒钟，可能不是预期的行为。@Mathletics适用于一些只按住键而不按下键的用户released@KevinB我会用按键代替。。也更新了我的帖子

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

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

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