Ovviamente, posso usare la casella di testo html standard, ma ho bisogno di un'area di testo per qualche motivo.È possibile disabilitare l'opzione multilinea textarea?
Quindi, è possibile disabilitare l'opzione multilinea di textarea?
Usa righe = 1 per visualizzare solo 1 riga. è possibile ottenere ulteriori informazioni da questo link
È possibile impostare l'attributo rows a 1.
Non è possibile disabilitare la multilinea
È possibile impostare la dimensione della vostra textarea utilizzando il cols e rows attributi e renderlo non ridimensionabile in CSS, ma non è possibile impedire all'utente di aggiungere più di una riga. Anche se l'area è troppo piccola, verrà visualizzata una barra di scorrimento che consentirà loro di scrivere il numero di righe desiderato.
Se è davvero necessario ottenere una sola riga, suggerisco di impostare l'attributo rows su 1 e verificare se l'input ha una sola riga con Javascript.
in HTML:
<textarea name="a" cols="5" rows="1" ></textarea>
In CSS:
textarea{
resize: none;
#You can use resize: horizontal if you just want to disable vertical resize
}
Eppure, io suggerirei di utilizzare un <input type="text" ... /> Perché vuoi per evitarlo?
Questo potrebbe non essere il caso d'uso dell'OP, ma mi sono appena imbattuto in questo problema quando si costruisce un input di base a linea singola ricco (consente lo styling di determinate parole o gruppi di parole all'interno della casella di testo). Per ottenere ciò, ho sovrapposto un div in stile con 'pointer-events: none;'. Per mantenerlo sincronizzato con l'input su scroll (quando l'utente digita oltre il limite), è necessario ascoltare un evento di scorrimento. Sfortunatamente, solo una textarea ne attiverà una (l'input si rifiuta di). Quindi in questo caso, l'input deve essere evitato. –
Questo non sembra funzionare (più): https://jsfiddle.net/73prdyze/ –
@NicolaeSurdu in che modo? Il violino a cui sei collegato sembra funzionare esattamente come ho descritto. Almeno in Chrome and Edge. – toniedzwiedz
Il seguente frammento jQuery forza l'area di testo da visualizzare in una singola riga.
$(document).ready(function(){
$('textarea').each(function(){$(this).attr('rows', 1);});
});
È possibile mantenere tutto il testo su una sola riga dalle impostazioni rows="1" sul <textarea>, come le altre risposte hanno suggerito, e quindi applicando la seguente CSS per l'area di testo:
resize: none;
white-space: nowrap;
overflow-x: scroll;
Questo Il CSS impedirà il riavvolgimento della singola riga, mantenendo comunque la visibilità dell'intera linea fornendo una barra di scorrimento per navigare in qualsiasi testo che trabocca dall'area visibile.
Avvertenza: Anche se si dispone di 'white-space: nowrap', visualizzerà tutto su 1 riga ('rows =" 1 "' o altrimenti), prende ancora tutti i caratteri che l'utente potrebbe inserire nella casella di testo, inclusi i ritorni a capo che non vengono visualizzati. – cusman
http://stackoverflow.com/questions/5424001/how-to-disable-multiline-input-being-dynamically-resized-by-user – vijaykumar