Bouton à l'intérieur de la balise TextArea en HTML

Je suis à la recherche pour créer une structure, dans laquelle un bouton est aligné sur le bord supérieur droit d'un textarea. J'ai été en mesure de le faire à l'aide de la CSS de positionnement. Lorsque je commence à taper à l'intérieur de la zone de texte, le texte est en dessous du bouton. Est-il un moyen pour que le texte normalement occupe toute la largeur de la zone de texte, mais sur l'atteinte des limites de la touche, s'amalgament à la ligne suivante?

  • Sémantiquement textarea doit contenir que du texte. Pourquoi voulez-vous placer un bouton à l'intérieur? Veuillez expliquer les raisons.
  • Je suis en train de "s'étendre" certaines fonctionnalités de la textarea pour les applications mobiles. Avec le bouton, j'ai l'intention d'ajouter quelques fonctionnalités à l'aide de JavaScript. Est-ce une mauvaise approche?
  • Peut-être une barre d'outils (une rangée de boutons au-dessus de la textarea serait mieux. Je ne pense pas que le texte dans un textarea peut s'écouler dans les autres contrôles.
  • pouvez-vous nous donner le code que vous avez jusqu'à présent?
  • Vous ne devriez pas essayer de placer un bouton à l'intérieur d'un textarea, qui n'a pas de sens du point de vue sémantique et ne devrait pas être fait. Vous pourriez faire ce que vous êtes en train de faire: positionner le bouton sur le dessus du textarea dans le bon endroit. À l'aide de JavaScript, vous pourriez ajouter des retours à la ligne pour le textarea aux bons endroits, mais je me demande si cela en vaut la peine.
  • Quelque chose de similaire à jsfiddle.net/8aAMa/7

InformationsquelleAutor saurabhsood91 | 2014-05-30
  1. 8

    Il y a toujours une option pour utiliser contentEditable attribut d'un élément inline au lieu de <textarea> et de le mettre à côté d'un bouton flottant.

    HTML:

    <div>
    <button>press me</button>
    <span contenteditable="true">editable</span>
</div>

    CSS:

    div {border: 1px solid gray; width: 15em; height: 5em; overflow-y: scroll;}
button {float: right;}

    jsFiddle

    • Cela fonctionne très bien pour moi...Exactement ce que je suis à la recherche d'
    InformationsquelleAutor Aprillion
  2. 1

    Faux. Enveloppez la zone de texte et le bouton dans un div contenant et la position des éléments. ensuite, le style de la div conteneur pour ressembler à la zone de texte. voici un accidenté de la maquette http://jsfiddle.net/LEkAJ/

    HTML

    <div class="container">
  <button>Button</button>
  <textarea>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</textarea>
</div>

    CSS

    .container {
    position:relative;
    width: 300px;
    height: 100px;
    border: 1px solid #ddd;
}
button {
    position:absolute;
    top: 3px;
    right:3px;
    width: 60px;
}
textarea {
    position:relative;
    border:none;
    width:232px;
    height: 95px;
    resize: none
    outline: none; /* add this to stop highlight on focus */
}
    • Assez proche de ce que je veux, mais ce serait juste si je pouvais le flot du texte autour du bouton. Si c'est impossible, je serais probablement utiliser
    • que faire alors: jsfiddle.net/LEkAJ/2
    InformationsquelleAutor Liam
  3. 1

    Je suis d'accord avec @Aprillion. Cette approche fonctionne. Regardez ce violon : http://jsfiddle.net/5pPRM/

    html:

    <p contenteditable="true">
<button onclick="alert($(this).parent().find('span').text());">hello</button>
    <span>
This is a paragraph. It is editable. Try to change this text. This is a paragraph. It is editable. Try to change this text.This is a paragraph. It is editable. Try to change this text.This is a paragraph. It is editable. Try to change this text.
    </span>
</p>

    css

    p
{
position:relative;
}
button
{
position:relative;
float:right;
margin: 0 0 2% 0;
}
    • C'est une très jolie mise en œuvre de ce que je veux faire. Seul problème, c'est que si je supprime tout le texte, je peux modifier le texte à l'intérieur du bouton. Toujours agréable de mise en œuvre
    • J'ai mis à jour ma propre réponse à l'adresse de deletable bouton.
    • jsfiddle.net/5pPRM/1 voici maintenant ne peut pas modifier le texte. mise à jour de mon violon.
    • Cela fonctionne très bien ainsi
    • Heureux de vous aider.
    InformationsquelleAutor Mayank Tripathi