$('input').on('input', function () { $(this).attr('size', $(this).val().length); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" size="0">Cuando la entrada se procesa, debe tener un ancho de 0, y cuando no tiene texto, debe tener un ancho de 0.
En su lugar, toma el ancho predeterminado. El atributo de size funciona correctamente para todos los tamaños superiores a 0.
¿Cómo puedo obtener un atributo de tamaño 0 en un elemento de entrada para que el navegador lo represente como ancho 0?
en este caso te recomendaría usar style='width: 0ch' . La longitud del campo será del tamaño de un carácter:
$('input').on('input', function () { $(this).css('width', $(this).val().length + 'ch'); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" style='width: 0ch'>Puede usar un selector de atributo CSS para aplicar width: 0px a todos los elementos de entrada donde el atributo de size es 0 .
$('input').on('input', function() { $(this).attr('size', $(this).val().length); }) input[size="0"] { width: 0px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" size="0"> Aunque sería mejor establecer su ancho en 0px onload para HTML sintácticamente válido:
$('input').on('input', function() { $(this).attr('size', $(this).val().length); }).width(0) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" size="0">