Por supuesto, puedo usar el cuadro de texto html estándar, pero necesito área de texto por alguna razón.¿Es posible deshabilitar la opción multilínea de textarea?
Entonces, ¿es posible deshabilitar la opción multilínea de textarea?
Utilice rows = 1 para visualizar solo 1 línea. puede obtener más información adicional de esta link
Puede establecer el atributo rows a 1.
No es posible desactivar la línea múltiple
Es posible ajustar el tamaño de su área de texto utilizando el cols y rows atributos y hacerlo no modificable de tamaño en CSS, pero no puede evitar que el usuario agregue más de una línea. Incluso si el área es demasiado pequeña, aparecerá una barra de desplazamiento y les permitirá escribir tantas líneas como deseen.
Si realmente necesita obtener solo una línea, le sugiero que configure el atributo rows en 1 y verifique si la entrada tiene una sola línea con Javascript.
en HTML:
<textarea name="a" cols="5" rows="1" ></textarea>
En CSS:
textarea{
resize: none;
#You can use resize: horizontal if you just want to disable vertical resize
}
Aún así, me gustaría sugerir el uso de un <input type="text" ... /> ¿Por qué quiere para evitarlo?
Puede que este no sea el caso de uso del OP, pero acabo de encontrarme con este problema cuando construyo una entrada de una línea enriquecida básica (permite el estilo de ciertas palabras o grupos de palabras dentro del cuadro de texto). Para lograr esto, he superpuesto un estilo div con 'pointer-events: none;'. Para mantenerlo sincronizado con la entrada en desplazamiento (cuando el usuario escribe más allá del borde), necesita escuchar un evento de desplazamiento. Desafortunadamente, solo un área de texto disparará uno (la entrada se rehúsa a hacerlo). Entonces, en este caso, la entrada debe ser evitada. –
Esto no parece funcionar (más): https://jsfiddle.net/73prdyze/ –
@NicolaeSurdu ¿cómo es eso? El violín al que vinculó parece funcionar exactamente de la manera que describí. Al menos en Chrome y Edge. – toniedzwiedz
El siguiente fragmento de jQuery obliga a textarea a mostrarse en una sola línea.
$(document).ready(function(){
$('textarea').each(function(){$(this).attr('rows', 1);});
});
Usted puede mantener todo el texto en una sola línea por la configuración rows="1" en el <textarea>, al igual que las otras respuestas han sugerido, y luego aplicando la siguiente CSS para el área de texto:
resize: none;
white-space: nowrap;
overflow-x: scroll;
Este CSS evitará que se enrolle la fila única, al mismo tiempo que mantiene visible toda la línea al proporcionar una barra de desplazamiento para navegar por cualquier texto que desborde el área visible.
Advertencia: incluso teniendo 'white-space: nowrap' hará que muestre todo en 1 línea ('rows =" 1 "' o de lo contrario), aún toma todos los caracteres que el usuario puede ingresar en el cuadro de texto, incluidos los retornos de carro que no se muestran. – cusman
http://stackoverflow.com/questions/5424001/how-to-disable-multiline-input-being-dynamically-resized-by-user – vijaykumar