Question

在用户输入一定数量的字符后，我正在使用下面的简单代码将文本框（<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事件。它有效，但只有你慢慢输入。如果你是一个快速的人，就像我怀疑这里的大多数人一样，使用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.
    }
});

Answer 2

第1行（注意参数）：

$('.info').keypress(function(e) {

第5行：

    var contents = $(this).val() + String.fromCharCode(e.keyCode);

Answer 3

Neil's answer可能是最好的方法。但是，如果你想继续用textarea替换输入，你可以使用jQuery的replaceWith()（在patrick_dw现在删除的答案中建议），但你应该避免使用像 keyup 这样的事件。 / p>

HTML5 oninput事件旨在处理各种文本输入，例如粘贴，拖放，拼写检查更正等。

$('.info').on('input', function() {
    var count = $(this).val().length;
    if (count > 10) {
        $(this).replaceWith('<textarea>', {value: this.value});
    }
});

Answer 4

将事件更改为keyup而不是keypress。

Answer 5

使用keyup代替keypress怎么样？在键被释放后触发动作（并且键入了角色）。

Answer 6

尝试使用keyup事件

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

Answer 7

当您的功能处理事件时，该字符尚未输入框中。查看传递给javascript函数的事件对象，并附加触发它的字符。

Answer 8

而不是使用Keypress使用keyup。这样，它允许在文本区域发生更改之前插入已键入数据的更改。这应该可以阻止最后一个字符被删除

Answer 9

尝试使用keyup而不是keypress。但我认为尼尔建议的是一种更好的方法。

在特定字符长度</textarea>之后使用jQuery将textbox替换为<textarea>

9 个答案: