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

Question

Le code HTML ci-dessous,

<input type="text"/>

s'affiche dans un navigateur de la manière suivante :

---

Lorsque j'ajoute le texte suivant,

Le renard brun et rapide a sauté par-dessus le chien paresseux.

En utilisant le code HTML ci-dessous,

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

il est affiché dans un navigateur de la manière suivante :

---

Mais j'aimerais qu'il soit affiché dans un navigateur de la manière suivante :

Je veux que le texte de mon élément de saisie soit enveloppé. Est-il possible de le faire sans textarea ?

Answer 1

C'est la textarea pour la saisie de texte multiligne. Les input ne le fera pas Il n'a pas été conçu pour cela.

Utilisez donc un textarea . Outre leurs différences visuelles, on y accède par JavaScript de la même manière (utiliser value ).

Vous pouvez empêcher l'introduction de nouvelles lignes par le biais de l'option input et en utilisant simplement un replace(/\n/g, '') .

Answer 2

Word Break imitera certaines des intentions de l'auteur de l'article.

    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" />

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

Answer 3

Vous pouvez pas utilise une entrée, vous devez utiliser textarea à la place. Utilisez la fonction textarea avec l'option wrap="soft" et optionnellement 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 ceci : <textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40"></textarea> Pour masquer le style du défilement, si vous n'utilisez que le style overflow:scroll; ou overflow:hidden; ou overflow:auto; il n'aura d'effet que pour une seule barre de défilement. Si vous souhaitez des attributs différents pour chaque barre de défilement, utilisez les attributs comme suit overflow:scroll; overflow-x:auto; overflow-y:hidden; dans la zone de style : Pour que la zone de texte ne soit pas redimensionnable, vous pouvez utiliser le style avec resize:none; comme ceci :

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

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

NOTE : textarea fonctionne avec des lignes contrairement à input <input type="text" name="tbox" size="10"></input> qui est faite à pas ne pas travailler du tout avec des rangées.

Answer 4

Pour créer une entrée de texte dont la valeur est une chaîne d'une seule ligne, mais qui est présentée à l'utilisateur dans un format enveloppé de mots, vous pouvez utiliser l'attribut contenteditable sur un attribut <div> ou tout 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>

Answer 5

Oui, c'est tout à fait possible. Il s'agit du code que ma sœur et moi avons écrit pour notre site web, qui permet aux internautes de saisir des questions et des informations supplémentaires, et qui comporte également une zone de texte enveloppante. Il se peut que vous deviez modifier certaines choses pour l'adapter à l'usage que vous en faites.

<div class="product-form__input">
    <label class="form__label" for="custom-questions">
        Your Question(s) & Additional Info.
    </label>
    <textarea class="field__textarea" required style="border:3px double #121212;" id="custom-questions" form="{{product_form_id}}" name="properties[Your Question(s) & Additional Info.]" rows="3" cols="41">
    </textarea>
</div>