Tengo un elemento de entrada, lo que quiero lograr es que cada vez que escriba en la entrada, los caracteres se insertarán en la etiqueta ap y se mostrarán. El código que tengo a continuación funciona parcialmente. El problema que tengo con mi código es que los caracteres comenzarán a mostrarse en la etiqueta p cuando escribo el segundo carácter. Quiero que comience a mostrarse después del primer carácter escrito. ¿Cómo puedo conseguir esto?
$('input').keypress(function() { if ($(this).val().length >= 0) { $('p').html($(this).val()) } }); $('input').keyup(function(e) { if (e.keyCode == 8) { if ($(this).val() == "" || $(this).val() == null) { $('p').html('') } $('p').html($(this).val()) } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input /> <p></p>Creo que el evento de input es ideal para este caso. También atrapa copiar y pegar en el campo.
$('input').on('input', function() { $('p').html($(this).val()) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input /> <p></p>Solo usa la función de teclado.
$('input').keyup(function() { if ($(this).val().length >= 0) { $('p').html($(this).val()) } }); $('input').keydown(function(e) { if (e.keyCode == 8) { if ($(this).val() == "" || $(this).val() == null) { $('p').html('') } $('p').html($(this).val()) } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input /> <p></p>