prueba
Por supuesto, puedo usar un cuadro de texto html estándar, pero necesito un área de texto por algún motivo.
Entonces, ¿es posible deshabilitar la opción multilínea de textarea?
Puede establecer el tamaño de su área de texto usando el cols y rows atributos y hacerlo no redimensionable 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 quieran.
Si realmente necesita obtener solo una línea, sugiero configurar el rows atributo a 1 y verificando 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í, sugeriría usar un <input type="text" ... /> ¿Por qué quieres evitarlo?
-
Es posible que este no sea el caso de uso del OP, pero me encontré con este problema al crear una entrada básica rica de una sola línea (permite el estilo de ciertas palabras o grupos de palabras dentro del cuadro de texto). Para lograr esto, he superpuesto un div con estilo con
pointer-events:none;. Para mantenerlo sincronizado con la entrada en el desplazamiento (cuando el usuario escribe más allá del borde), debe escuchar un evento de desplazamiento. Desafortunadamente, solo un área de texto disparará uno (la entrada se niega a hacerlo). Entonces, en este caso, se debe evitar la entrada.– Bailey Parker
9 de septiembre de 2014 a las 5:00
-
@NicolaeSurdu, ¿cómo es eso? El violín al que te vinculaste parece funcionar exactamente como lo describí. Al menos en Chrome y Edge.
– toniedzwiedz
9 de marzo de 2017 a las 23:56
-
Culpa mía. No vi que mencionó que el usuario aún puede crear una nueva línea en el área de texto. Yo, y creo que también el OP, estaba buscando una solución para evitar eso también.
– Nicu Surdu
10 de marzo de 2017 a las 15:16
-
@NicolaeSurdu la solución para eso es
type="text"🙂– toniedzwiedz
10 de marzo de 2017 a las 15:34
-
@toniedzwiedz en realidad, la solución es JS 🙂
– Nicu Surdu
10 de marzo de 2017 a las 15:43
Puede mantener todo el texto en una sola línea mediante la configuración rows="1" sobre el <textarea>como han sugerido las otras respuestas, y luego aplicando el siguiente CSS al área de texto:
resize: none;
white-space: nowrap;
overflow-x: scroll;
Este CSS evitará que se ajuste 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: nowraphará que muestre todo en 1 línea (rows="1"o de lo contrario), todavía toma todos los caracteres que el usuario podría ingresar en el cuadro de texto, incluidos los retornos de carro que no se muestran.– cusman
14 de junio de 2016 a las 22:06
Sí, es posible usar input event para eliminar todos los caracteres de nueva línea cada vez que un usuario ingresa algo.
<textarea oninput="this.value = this.value.replace(/\n/g,'')"></textarea>
O de una manera más civilizada:
html
<textarea id="ta"></textarea>
js
document.getElementById('ta').addEventListener('input', function(e){
this.value = this.value.replace(/\n/g,'')
});
-
La única solución en la lista que funcionó para mí.
– Vass
9 de diciembre de 2021 a las 3:32
-
Para reemplazar la pieza después del primer salto de línea, puede hacer
oninput="this.value=this.value.replace(/\n[\s\S]*/,'');update()"dónde[\s\S]es como.pero coincide con las nuevas líneas. los//sEl modificador también hace que los saltos de línea coincidan con puntos, pero solo se agregó en ES2018.– nisetama
16 ago a las 23:08
Puedes usar wrap="off" atributo en el área de texto para que se muestre en una sola línea.
<textarea wrap="off"></textarea>Use este código JS puro y no permitirá que el usuario ingrese varias líneas en el área de texto
var textArea = document.getElementsByTagName("textarea")[0];//your desired TextArea
textArea.onkeydown = function (e) {
if (e.keyCode == 13) { e.preventDefault(); }
};
NOTA: Este método no funcionará si el usuario copia un texto de varias líneas y lo pega en TextArea.
Zlatán
Use filas = 1 para mostrar solo 1 línea. puede obtener más información de este Enlace
Tikkes
Puede configurar el rows atribuye a 1.
No es posible deshabilitar la multilínea
stackoverflow.com/questions/5424001/…
– Vijay Kumar
24 de mayo de 2012 a las 6:50