Umschließen von Text in Eingabetyp = "Text" -Element HTML / CSS

96

Der unten gezeigte HTML-Code,

<input type="text"/>

wird in einem Browser wie folgt angezeigt:


Wenn ich den folgenden Text hinzufüge,

Der schnelle braune Fuchs sprang über den faulen Hund.

Verwenden Sie den folgenden HTML-Code.

<input type="text" value="The quick brown fox jumped over the lazy dog."/>

es wird in einem Browser wie folgt angezeigt:


Aber ich möchte, dass es in einem Browser wie folgt angezeigt wird:


Ich möchte, dass der Text in meinem Eingabeelement umbrochen wird. Kann dies ohne einen Textbereich erreicht werden?

Webdesigner
quelle
3
Nein, ich glaube nicht. Aber warum ist ein Textbereich keine Option?
Pekka
35
Die Verwendung eines Textbereichs ist manchmal keine Option, da Sie die Eingabe mehrerer Textzeilen nicht zulassen möchten. Nur um eine einzelne Textzeile zu umbrechen (Hinweis: Sie sind nicht dasselbe).
Flatliner DOA
Es gibt eine Lösung, die genau für diesen Zweck mit der CSSWG zur Standardisierung besprochen wurde. Leider kann ich das Problem nicht finden.
Null
Ich habe es gefunden; github.com/w3c/csswg-drafts/issues/2141
Null
1
@ Pekka 웃 nicht, dass es relevant ist, aber einige Gründe sind: Wir können die HTML5-Validierung nicht für Textbereiche verwenden; Wir können keine Mustereinschränkungen verwenden, um Textbereiche zu validieren. Ein Textbereich ist ein unnötiges Synonym für einen Eingabetyp = Text (es ist eine Eingabe vom Typ Text!), was das Doppelte des Stils usw. usw. bedeutet. Kurz gesagt, es gibt viele Gründe.
Peter Konga-Kamau

Antworten:

61

Das ist die textareaAufgabe von - für die mehrzeilige Texteingabe. Das input wird es nicht tun ; es war nicht dafür ausgelegt.

Verwenden Sie also a textarea. Neben ihren visuellen Unterschieden wird auf dieselbe Weise über JavaScript zugegriffen ( valueEigenschaft verwenden).

Sie können verhindern, dass Zeilenumbrüche über das inputEreignis eingegeben werden , und verwenden einfach a replace(/\n/g, '').

Alex
quelle
69
Dies beantwortet nicht wirklich die Frage, wie eine einzelne Eingabezeile erfasst werden soll, während sie während der Eingabe verpackt angezeigt wird.
ehdv
3
Ein Hauptproblem dabei ist, dass ein Textbereich die Go-Taste auf Mobilgeräten unterdrückt.
Dan
2
@alex Genau. Wenn Sie also eine echte mehrzeilige Eingabe wünschen, ist ein Textbereich besser. Wenn Sie jedoch nur eine Eingabe in Zeilenumbruch wünschen, ist die CSS-Lösung besser.
Dan
1
Ich wollte gerade sagen, dass dies <textarea>nicht mit Dingen wie der automatischen Vervollständigung von jQuery funktioniert, sondern nur <input>mit <textarea>und das ist alles, was notwendig ist. Hurra für Standards!
Sablefoste
9
Wie oben gesagt: Zeilenumbruch! == eine mehrzeilige Zeichenfolge. Ich bin mir nicht sicher, warum dies die akzeptierte Antwort ist, da sie die Frage nicht beantwortet.
MattLummus
37

Word Break ahmt einige der Absichten nach

    input[type=text] {
        word-wrap: break-word;
        word-break: break-all;
        height: 80px;
    }
<input type="text" value="The quick brown fox jumped over the lazy dog" />

Um dieses Problem zu umgehen, verlor diese Lösung in einigen Browsern ihre Wirksamkeit. Bitte überprüfen Sie die Demo: http://cssdesk.com/dbCSQ

Thiago Macedo
quelle
7
Ich habe es gerade in Firefox 43.0.4 getestet und es funktioniert nicht, aber in Safari 9 und Chrome 48 scheint es zu funktionieren: cssdesk.com/dbCSQ
Jason Sperske
6
Die angehängte Demo von @JasonSperske funktioniert weder für mich noch in Firefox 45, nicht in Chrome 50.
czerny
Die Demo funktioniert für mich in Chrome 48 unter Linux, aber das gleiche CSS auf meiner eigenen Seite nicht.
Mnebuerquo
40
Die Lösung wurde zumindest von Chrome 50 veraltet :(
Userlond
4
Vergessen Sie diese Lösung: funktioniert nicht mit Chrome 74/75, Firefox 63/67, Edge 42, IE 11 und UCBrowser 7.0 (funktioniert aber mit GNOME Web 3.28 - AppleWebKit / 605.1.15)
tanguy_k
10

Sie können keine Eingabe dafür verwenden, sondern müssen stattdessen den Textbereich verwenden. Verwenden Sie den Textbereich mit dem wrap="soft"Code und optional die restlichen Attribute wie folgt:

<textarea name="text" rows="14" cols="10" wrap="soft"> </textarea>

Attribute: Um die Textmenge darin beispielsweise auf "40" Zeichen zu beschränken, können Sie das Attribut folgendermaßen hinzufügen maxlength="40": <textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40"></textarea> Um den Bildlauf auszublenden, wird der Stil dafür verwendet. wenn Sie verwenden overflow:scroll;oder overflow:hidden;oder overflow:auto;es dauern wird , nur für eine Bildlaufleiste beeinflussen. Wenn Sie für jede Bildlaufleiste unterschiedliche Attribute wünschen, verwenden Sie die folgenden Attribute overflow:scroll; overflow-x:auto; overflow-y:hidden;im Stilbereich: Um die Größe des Textbereichs nicht zu ändern, können Sie den Stil folgendermaßen verwenden resize:none;:

<textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40" style="overflow:hidden; resize:none;></textarea>

Auf diese Weise können Sie einen Textbereich mit 14 Zeilen und 10 Spalten mit Zeilenumbruch und einer maximalen Zeichenlänge von "40" Zeichen erstellen oder als Beispiel verwenden, der genau wie ein Eingabetextfeld funktioniert, jedoch mit Zeilen stattdessen und ohne Verwendung von Eingabetext.

HINWEIS: Der Textbereich funktioniert mit Zeilen, im Gegensatz zu Eingaben <input type="text" name="tbox" size="10"></input>, bei denen überhaupt keine Zeilen verwendet werden.

SeekLoad
quelle
7

Um eine Texteingabe zu erstellen, bei der der Wert unter der Haube eine einzeilige Zeichenfolge ist, dem Benutzer jedoch in einem wortumschlossenen Format angezeigt wird, können Sie das Attribut contenteditable für ein <div>oder ein anderes Element verwenden:

const el = document.querySelector('div[contenteditable]');

// Get value from element on input events
el.addEventListener('input', () => console.log(el.textContent));

// Set some value
el.textContent = 'Lorem ipsum curae magna venenatis mattis, purus luctus cubilia quisque in et, leo enim aliquam consequat.'
div[contenteditable] {
  border: 1px solid black;
  width: 200px;
}
<div contenteditable></div>

Sam Herrmann
quelle