Textarea redimensionner

J'ai besoin d'utiliser un textarea pour afficher du texte. Le problème est que si je place 4-5 lignes de texte, une barre de défilement apparaît. Comment puis-je utiliser CSS/HTML, de sorte que le textarea sera aussi importante que son contenu (pas de barre de défilement).

  • le textarea n'a pas besoin de changer la taille de dynamicaly, je l'utilise seulement pour afficher un texte (je pourrais aussi utiliser un handicapé textarea)
  • Je veux le textarea pour étirer seulement verticaly.

Si vous voulez savoir:
J'utilise le composant textarea pour afficher du texte à partir d'une base de données, de sorte que lorsque le textarea (avec le texte) est créée, elle doit démontrer à l'ensemble du texte, à la fois avec pas de barres de défilement.

Le point de l'ensemble d'un textarea est pour permettre à l'utilisateur de saisir du texte. Si vous souhaitez afficher du texte, l'utilisation d'un élément approprié de la sémantique (peut-être la div, p ou avant).

OriginalL'auteur Cristy | 2011-04-02

  1. 5

    Im peur que vous pourrez avoir recours à javascript pour régler la hauteur de votre textarea. Vous pouvez utiliser le scrollHeight propriété pour déterminer la hauteur totale.

    Alternativement, vous pouvez simplement utiliser un div et le style de l' div à ressembler à un textarea. Le div augmentera automatiquement et comme un handicapé textarea de toute façon, vous n'avez pas vraiment besoin d'être un textarea.

    OriginalL'auteur jeroen

  2. 12
    <!DOCTYPE html>
<html>
<head>
<title>autoresizing textarea</title>
<style type="text/css">
textarea {
border: 0 none white;
overflow-y: auto;
padding: 0;
outline: none;
background-color: #D0D0D0;
resize: none;
}
</style>
<script type="text/javascript">
var observe;
if (window.attachEvent) {
observe = function (element, event, handler) {
element.attachEvent('on'+event, handler);
};
}
else {
observe = function (element, event, handler) {
element.addEventListener(event, handler, false);
};
}
function init (maxH) {
var text = document.getElementById('text');
var maxHeight=maxH;
var oldHeight=  text.scrollHeight;
var newHeight;
function resize () {
text.style.height = 'auto';
newHeight= text.scrollHeight;
if(newHeight>oldHeight && newHeight>maxHeight  )
{
text.style.height=oldHeight+'px';
}
else{
text.style.height = newHeight+'px';
oldHeight=  text.scrollHeight;
}
}
/* 0-timeout to get the already changed text */
function delayedResize () {
window.setTimeout(resize, 0);
}
observe(text, 'change',  resize);
observe(text, 'cut',     delayedResize);
observe(text, 'paste',   delayedResize);
observe(text, 'drop',    delayedResize);
observe(text, 'keydown', delayedResize);
text.focus();
text.select();
resize();
}
</script>
</head>
<body onload="init(200);">
<textarea rows="1" style="height:1em;" id="text"></textarea>
</body>
</html>

    http://jsfiddle.net/TDAcr/

    Brillant, Amin! Je me sens comme je ai frappé or sur internet par trouver ce. Vous méritez plus que quatre voix, mais je n'ai qu'un seul crédit, je peux vous donner.

    OriginalL'auteur Amin Rahimi

  3. 5

    Bon, je viens de trouver ceci et cela fonctionne très bien:

    <html>
<head>
<script>
function textAreaAdjust(o) {
o.style.height = "1px";
o.style.height = (25+o.scrollHeight)+"px";
}
</script>
</head>
<body>
<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>
</body>
</html>

    Maintenant, je ne présumez pas que vous savez Javascript (mais vous pouvez être).

    Il suffit d'exécuter 

    textAreaAdjust(document.getElementById("id of your text area"))

    Quelque chose comme ça devrait fonctionner. Je ne suis pas le meilleur avec du Javascript (même pas proche, j'ai juste commencé à l'aide de l'autre jour)

    Qui semble faire quelque chose de similaire à ce que vous voulez. Le premier exemple de code est pour un textarea qui change dynamiquement en fonction sur ce qu'il est (lors de la frappe). Il va prendre une couple de changements pour obtenir comme vous le souhaitez.

    Je sais javascript mais je ne veux pas l'utiliser ici. Aussi, j'ai dit le textarea ne doit pas être modifiable, ou changer la taille lors de l'écriture. Il a juste besoin d'afficher l'intégralité du texte(lorsque le chargement de la page) sans barre de défilement.
    Je sais que C++, j'ai pu également créer cette macro mais... Où est le plaisir? xD
    Beaucoup, beaucoup. Il est préférable de créer un nettoyage écrit site au lieu de travailler avec un piraté chose. Surtout lorsqu'ils traitent avec les clients.
    C'est mon site personnel. J'ai toujours dis: "ok, le mal est fait; je vais faire le prochain site web deux fois mieux!"
    Oh bien. L'apprentissage est meilleur! L'essai et l'erreur est la meilleure!

    OriginalL'auteur FreeSnow

  4. 1

    Vous pouvez utiliser le CSS hauteur: et la largeur: les attributs, les e. g. quelque chose comme
    <textarea style="width:400px;height:300px">...</textarea>, il suffit d'utiliser les tailles que vous voulez.

    En outre, si vous souhaitez supprimer la barre de défilement, utilisez overflow:hidden.

    Le problème est que le texte affiché est de taille variable, donc je ne peux pas dire "width:300px;" . Un textarea peut être 200px tal et un autre peut être 800px ...

    OriginalL'auteur addaleax

  5. 1

    vous pouvez utiliser des div comme textarea. Il est possible comme ceci:

    <div contenteditable="true" style="width:250px; border:1px solid #777" ></div

    OriginalL'auteur Guwanch

  6. 0

    Trouver la hauteur de la police, vous aurez très probablement de l'affichage. Je ne suis pas sûr à propos de CSS/HTML, mais vous pouvez utiliser Javascript/PHP/ASP.net pour utiliser la carte pour déterminer comment grand que le texte sera basé sur le nombre de caractères. Si vous le faites dans une police à chasse fixe, ce sera encore plus facile. Pourquoi utiliser une zone de texte lorsque vous pouvez simplement utiliser un label qui va faire la même chose par lui-même?

    J'utilise un textarea, car c'est un site que j'ai fait il y a quelques temps, et j'ai fait cela à l'aide de textarea, je ne peux pas changer cela. Je veux dire, lorsque vous tapez dans un div, span, div auto-redimensionne. Je ne peux pas "activer" que autoresize dans le textarea?:D
    Ainsi, chaque contrôle est fait pour faire des choses différentes. Ces zones de texte sont mis à dessein afin de ne pas redimensionner. Quelle est la raison que votre requis pour utiliser le textarea?
    Parce que j'ai créé un site il y a un an, qui vous permettra d'ajouter un peu de Publicité (contenant du texte). De retour alors j'ai dit à l'aide de ces zones de texte, et maintenant je veux changer un peu la façon dont ils regardent. Je ne veux pas aller à travers toutes les annonces déjà postées et remplacer le "textarea" avec un div.
    Oh, ok. Je n'ai jamais vraiment fait de html/css du site en avant. Tous les trucs de ma est asp.net et il est tout seul les changements de page. Oh bien 🙂 Essayez d'y d'autres solution que j'ai posté.

    OriginalL'auteur FreeSnow

  7. 0

    Si vous n'avez pas l'esprit à l'aide de JavaScript, vous pouvez utiliser l'approche de l'un des articles suivants:
    http://james.padolsey.com/javascript/jquery-plugin-autoresize/
    http://scvinodkumar.wordpress.com/2009/05/28/auto-grow-textarea-doing-it-the-easy-way-in-javascript/

    Mais à partir de vos quêtes je suppose que vous voulez pur CSS solution.
    Ensuite, vous pouvez simplement imiter appereance de textarea à l'aide de simples div et css suivant (si vous voulez juste pour l'affichage du texte): 

    div {
cursor: text;
background: lightGray;
border: 1px solid gray;
font-family: monospace;
padding: 2px 0px 0px 2px;
}
    Le "mal" est déjà fait. J'ai utilisé textarea dans les pages que j'ai créé avant et je veux faire cela pour toutes, sans rien changer à la page, en changeant uniquement le CSS filme
    Il est impossible en CSS (même avec CSS3). Vous devez recourir à l'aide d'un petit morceau de JavaScript.

    OriginalL'auteur Eskat0n

  8. 0

    Je suppose name attribut n'est pas utilisé. Vous pouvez utiliser cette alternative (HTML5):

    http://jsfiddle.net/JeaffreyGilbert/T3eke/

    Wtf? Chaque fois que j'appuyez sur entrée dans la div, quelque chose de bizarre happenes :)) Il en crée une autre div à l'intérieur de celui-là.
    jsfiddle.net/JeaffreyGilbert/T3eke/1

    OriginalL'auteur Jeaf Gilbert

  9. 0

    À l'aide de la redimensionner la propriété travaille ces jours-ci:

    resize: none;

    OriginalL'auteur Dwayne Forde