Question

是否可以从

克隆值

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

和

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

将纯文本立即转换为div或paragraph标签？

示例：如果输入“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和keypress个事件，对现代浏览器使用input。

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

demo - keyup / keypress
demo - 输入

克隆表格输入值立即为文本

3 个答案: