在特定字符长度之后使用jQuery将文本框替换为<textarea>

Question

在用户键入一定数量的字符后,我使用下面的简单代码将textbox(<input type=text />)替换为<textarea>元素.在下面的示例中,这发生在第10个字符之后.该代码有效,但<textarea>省略了用户键入的第10个字符的内容.例如,如果在文本框中键入"testing 1234",则textarea将省略"4".有任何想法吗？谢谢.--Jake

    $('.info').keypress(function() {
    var count = $(this).val().length;
    if (count > 10)
    {
        var contents = $(this).val();
        $(this).after('<textarea></textarea>').next().val(contents).end().remove()
    }
})

更新:我尝试了许多人分享的建议:使用keyup事件.它有效,但只有你慢慢输入.如果你是一个快速的typer,就像我怀疑这里的大多数人一样,使用keyup事件时仍然会省略第10个字符.

Answer 1

也许你应该从一开始就使用textarea,只增加"rows"属性.我愿意打赌你在改变后维护你所有的角色,它的行为就像一个行="1"的文本框.

$('.info').keypress(function() {
    var count = this.value.length;
    if (this.rows == 1 && count > 10)
    {
        this.rows = 4;  // Or whatever you'd prefer.
    }
});