Использование jQuery для замены текстового поля на <textarea>после определенной длины символа

Question

Я использую простой код ниже, чтобы заменить текстовое поле (<input type=text />) на элемент <textarea> после того, как пользователь введет определенное количество символов.В приведенном ниже примере это происходит после 10-го символа.Код работает, за исключением того, что в содержимом <textarea> пропущен 10-й символ, введенный пользователем.Например, если вы наберете «test 1234» в текстовом поле, текстовое поле пропустит «4».Есть идеи?Благодарю.- Джейк

    $('.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.Это работает, но только если вы печатаете медленно.Если вы быстрый типпер, как я подозреваю, большинство людей здесь, 10-й символ по-прежнему опускается при использовании события keyup.

Answer 1

Возможно, вам следует использовать textarea с самого начала, дополняя только атрибут «строки».Я бы поспорил, что вы сохраните все свои символы после изменения, и он будет вести себя точно так же, как текстовое поле со строками = "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

Нейловский ответ , вероятно, лучший подход. Однако, если вы хотите продолжить замену ввода текстовой областью, вы можете использовать jQuery replaceWith () (предложено в теперь удаленном ответе patrick_dw), но вам следует избегать использования таких событий, как KeyUp .

Событие HTML5 oninput было разработано для обработки всех видов ввода текста, таких как вставка, перетаскивание, исправление проверки орфографии и т. Д.

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

Answer 3

Строка 1 (обратите внимание на аргумент):

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

Строка 5:

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

Answer 4

Когда событие обрабатывается вашей функцией, персонаж не вводится в поле. Посмотрите на объект события, переданный в функцию javascript, и добавьте символ, который его вызвал.

Answer 5

Попробуйте использовать событие 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 6

А как насчет использования keyup вместо keypress? Это запускает действие после того, как клавиша отпущена (и символ введен).

Answer 7

Измените событие на keyup вместо keypress.

Answer 8

Попробуйте использовать keyup вместо нажатия клавиши.Но я думаю, что Нил предложил лучший подход.

Answer 9

Вместо использования Keypress используйте keyup. таким образом, это позволяет вносить изменения для введенных данных до того, как изменение произойдет с текстовой областью. это должно остановить сброс последнего символа