Ist es möglich, die mehrzeilige Option von textarea zu deaktivieren?

Lesezeit: 4 Minuten

tesicg

Natürlich kann ich ein Standard-HTML-Textfeld verwenden, aber ich brauche aus irgendeinem Grund einen Textbereich.

Ist es also möglich, die mehrzeilige Option von textarea zu deaktivieren?

stackoverflow.com/questions/5424001/…

– vijaykumar

24. Mai 2012 um 6:50 Uhr

Sie können die Größe Ihres Textfeldes mit einstellen cols und rows Attribute und machen es in CSS nicht veränderbar, aber Sie können den Benutzer nicht daran hindern, mehr als eine Zeile hinzuzufügen. Auch wenn der Bereich einfach zu klein ist, erscheint eine Bildlaufleiste und lässt sie so viele Zeilen schreiben, wie sie möchten.

Wenn Sie wirklich nur eine Zeile benötigen, empfehle ich die Einstellung von rows Attribut auf 1 setzen und prüfen, ob die Eingabe eine einzelne Zeile mit Javascript enthält.

Im HTML-Format:

<textarea name="a"  cols="5" rows="1" ></textarea>

Im CSS:

textarea{
    resize: none; 
    #You can use resize: horizontal if you just want to disable vertical resize
}

Trotzdem würde ich vorschlagen, eine zu verwenden <input type="text" ... /> Warum willst du es vermeiden?

Dies ist möglicherweise nicht der Anwendungsfall des OP, aber ich bin gerade auf dieses Problem gestoßen, als ich eine einfache, reichhaltige, einzeilige Eingabe erstellt habe (ermöglicht die Gestaltung bestimmter Wörter oder Wortgruppen innerhalb des Textfelds). Um dies zu erreichen, habe ich ein gestyltes div mit überlagert pointer-events:none;. Um es mit der Eingabe beim Scrollen (wenn der Benutzer über den Rand hinaus tippt) synchron zu halten, müssen Sie auf ein Scroll-Ereignis warten. Leider wird nur ein Textbereich einen auslösen (Eingabe verweigert). In diesem Fall muss also auf Eingaben verzichtet werden.

– BaileyParker

9. September 2014 um 5:00 Uhr
@NicolaeSurdu wie das? Die von Ihnen verlinkte Geige scheint genau so zu funktionieren, wie ich es beschrieben habe. Zumindest in Chrome und Edge.

– tonedzwiedz

9. März 2017 um 23:56 Uhr
Mein Fehler. Ich habe nicht gesehen, dass Sie erwähnt haben, dass der Benutzer immer noch eine neue Zeile im Textbereich erstellen kann. Ich, und ich denke auch das OP, suchte nach einer Lösung, um auch das zu verhindern.

– Nicu Surdu

10. März 2017 um 15:16 Uhr
@NicolaeSurdu die Lösung dafür ist type="text" 🙂

– tonedzwiedz

10. März 2017 um 15:34 Uhr
@toniedzwiedz eigentlich ist die Lösung JS 🙂

– Nicu Surdu

10. März 2017 um 15:43 Uhr

Sie können den gesamten Text durch Einstellungen in einer einzigen Zeile halten rows="1" auf der <textarea>wie die anderen Antworten vorgeschlagen haben, und dann das folgende CSS auf den Textbereich anwenden:

resize: none;
white-space: nowrap;
overflow-x: scroll;

Dieses CSS verhindert, dass die einzelne Zeile umgebrochen wird, während die gesamte Zeile weiterhin sichtbar bleibt, indem eine Bildlaufleiste bereitgestellt wird, mit der durch Text navigiert werden kann, der den sichtbaren Bereich überläuft.

Achtung: Auch während des Habens white-space: nowrap wird es alles in einer Zeile anzeigen (rows="1" oder auf andere Weise), werden immer noch alle Zeichen benötigt, die der Benutzer möglicherweise in das Textfeld eingibt, einschließlich Wagenrückläufe, die nicht angezeigt werden.

– kunden

14. Juni 2016 um 22:06 Uhr

Ja, die Verwendung ist möglich input -Ereignis, um alle Zeilenumbruchzeichen jedes Mal zu entfernen, wenn ein Benutzer etwas eingibt.

<textarea oninput="this.value = this.value.replace(/\n/g,'')"></textarea>

Oder zivilisierter:

html

<textarea id="ta"></textarea>

document.getElementById('ta').addEventListener('input', function(e){
    this.value = this.value.replace(/\n/g,'')
});

Demo auf JSFiddle

Einzige Lösung in der Liste, die für mich funktioniert hat

– Wass

9. Dezember 2021 um 3:32 Uhr
Zum Ersetzen des Teils nach dem ersten Zeilenvorschub können Sie dies tun oninput="this.value=this.value.replace(/\n[\s\S]*/,'');update()"wo [\s\S] ist wie . aber es passt zu Zeilenumbrüchen. Das //s Der Modifikator sorgt auch dafür, dass Zeilenumbrüche mit Punkten übereinstimmen, aber er wurde erst in ES2018 hinzugefügt.

– Nisetama

16. August um 23:08 Uhr
muss ich beachten \r\n oder sind neue Zeilen in Browsern immer \n?

– Loligans

Vor 2 Tagen

Sie können verwenden wrap="off" Attribut im Textbereich, das in einer einzelnen Zeile angezeigt werden soll.

<textarea wrap="off"></textarea>

Verwenden Sie diesen reinen JS-Code und er erlaubt dem Benutzer nicht, mehrere Zeilen in den Textbereich einzugeben

var textArea = document.getElementsByTagName("textarea")[0];//your desired TextArea
textArea.onkeydown = function (e) {
    if (e.keyCode == 13) { e.preventDefault(); }
};

HINWEIS: Diese Methode funktioniert nicht, wenn der Benutzer einen mehrzeiligen Text kopiert und in die TextArea einfügt.

Zlatan

Verwenden Sie rows=1, um nur eine Zeile anzuzeigen. Weitere Informationen können Sie diesem entnehmen Verknüpfung

Tikkes

Sie können die einstellen rows Attribut zu 1.

Es ist nicht möglich, die Multiline zu deaktivieren

14370600cookie-checkIst es möglich, die mehrzeilige Option von textarea zu deaktivieren?

#html #Textbereich