web-dev-qa-db-fra.com

Habillage du texte dans l'élément input type = "text" HTML / CSS

Le HTML montré ci-dessous,

<input type="text"/>

est affiché dans un navigateur comme celui-ci:

Le rapide renard brun sauta par dessus le chien paresseux.

En utilisant le HTML ci-dessous,

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

il est affiché dans un navigateur comme celui-ci:



htmlinputword-wrap
63
Web_Designer

C’est le travail de textarea - pour la saisie de texte multiligne. Le inputne le fera pas ; ce n'était pas conçu pour le faire.

Donc utilisez un textarea. Outre leurs différences visuelles, ils sont accessibles via JavaScript de la même manière (utilisez la propriété value).

Vous pouvez empêcher la saisie de nouvelles lignes via l'événement input et simplement à l'aide de la fonction replace(/\n/g, '').

48
alex

Word Break imitera une partie de l'intention

input.break {
    Word-wrap: break-Word;
    Word-break: break-all;
    height: 80px;
}

En guise de solution de contournement, cette solution a perdu de son efficacité sur certains navigateurs. Veuillez vérifier la démo: http://cssdesk.com/dbCSQ

39
Thiago Macedo

Vous pouvez not utiliser les entrées, vous devez utiliser textarea à la place. Utilisez textarea avec le wrap="soft"code et optionnel le reste des attributs comme ceci:

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

Attributs: Pour limiter la quantité de texte qu'il contient, par exemple à "40" caractères, vous pouvez ajouter l'attribut maxlength="40" comme ça: <textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40"></textarea> Pour masquer le défilement du style. si vous utilisez uniquement overflow:scroll; ou overflow:hidden; ou overflow:auto; il ne s’appliquera qu’à une barre de défilement. Si vous voulez des attributs différents pour chaque barre de défilement, utilisez les attributs suivants: overflow:scroll; overflow-x:auto; overflow-y:hidden; dans la zone de style: pour rendre la zone de texte non redimensionnable, vous pouvez utiliser le style avec resize:none; comme ça:

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

De cette façon, vous pouvez avoir ou par exemple une zone de texte avec 14 lignes et 10 colonnes avec un retour à la ligne et une longueur de 40 caractères maximum qui fonctionne exactement comme une zone de texte de saisie mais avec des lignes et sans utiliser de texte de saisie.

NOTE: textarea fonctionne avec des lignes différentes de l’entrée <input type="text" name="tbox" size="10"></input> qui est fait pour pas travailler avec des lignes du tout.

7
SeekLoad

Pour créer une entrée de texte dans laquelle la valeur sous le capot est une chaîne simple mais présentée à l'utilisateur dans un format enveloppé par Word, vous pouvez utiliser l'attribut contenteditable sur un <div> ou autre élément:

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>
1
Sam Herrmann