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

Der unten gezeigte HTML-Code,

<input type="text"/>

wird in einem Browser wie folgt angezeigt:

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:

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, '').

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

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.

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>