Le duplicate suggéré est la question où j'ai eu la base de cette question, donc c'est pas em> un duplicata! En fait, je déjà em> sont liés à cette question dès le début ... bon édition: p> J'ai fait un Si nous pouvons envoyer automatiquement un événement KeyPress, cela peut fonctionner ... ( Cette question pertinente n'a pas aidé, les réponses n'avaient aucun effet). P> J'utilise le i Mettez à jour la zone de texte comme ceci: P>
textarea code > Tant à partir de ici . Ensuite, j'ai lu depuis un fichier et je pose le contenu à l'intérieur de la zone de texte, mais cela ne vous est pas redimensionné car il se doit. P> $('#cagetextbox').attr("rows", how many rows does the new text contain);
3 Réponses :
Votre Textarea n'a pas mis à jour la hauteur elle-même, même lorsque vous déclenchez «INPUT.TEXTAREA», car cette valeur est indéfinie:
$('#cagetextbox').val(text).trigger('input.textarea');
J'ai soustrait 1 à partir de this.Rows = MinRows + lignes; et semble très bon! Les joueurs de la cage aimeraient vous remercier également (nous jouons là-bas, Google Cage Samaras pour plus).
Notez que cela a fonctionné comme un charme lorsque je remplacé dans la partie html les deux 3 avec deux 1.
Vous pouvez utiliser le code suivant pour régler la hauteur d'un élément, dans votre cas une textarea. Bien que cela utilise une boucle, il évite plusieurs problèmes d'affichage et de défilement de cette façon.
function updateTextbox(text) {
$('#cagetextbox').val(text);
autoheight($("#cagetextbox"));
};
Les joueurs de la cage vous remercient beaucoup (nous jouons là-bas, Google Cage Samaras pour plus).
Cependant, cela ruine le bon redimensionnement qui parlait avant cela. Néanmoins, bon effort!
Je suis désolé, lequel redimensionnement est ruiné? Essayez également d'entrer du texte au centre ou au début de la Textarea dans le violon à cette réponse et de la même réponse, au moins en chrome, la position du curseur n'est pas prémêlée dans l'autre violon.
J'ai créé un violon de travail. Il crée un texte d'entrée exactement comme s'il était affiché dans la Div non modifiable.
https: // jsfiddle. NET / KHGK7NT5 / 2 / P>
Exemple CSS P>
var testText = "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore"
var test = $("<div/>");
test.addClass("test testLoc");
test.text(testText);
$("body").append(test);
var out = $("<textarea/>");
out.addClass("test");
out.width(test.width());
out.height(test.height());
out.val(testText);
$("body").append(out);
test.remove();
Bien sûr, désolé, je ne pouvais pas faire un violon plus rapide, travailler sur mes propres trucs. Bonne chance pour votre projet. :)
Pas de problème, tu as mon +1!
Il est généralement préférable de le rendre aussi gros que d'utiliser, disons,
largeur: 100%; , et laissez le texte remplir et faire défiler le texte au besoin, plutôt que de risquer une boîte de surdimensionnée dans la fenêtre.Je voudrais le garder sévérable pour diverses raisons @dandavis, mais merci pour le commentaire.
Eh bien, il est difficile de dire à la taille de pixels que la police utilisera (sous réserve de zoom, de préfs utilisateur, de système d'exploitation, de Text-Text, etc.), ce qui signifie que le
cols = n est le seul manière fiable de la dimensionner. Ainsi, vous devez trouver la largeur de la ligne la plus longue et définir le fichiercols attributé.cagetextbox.cols = math.max.apply (null, texte.split ("\ n ") .map (fonction (a) {renvoie a.length;});@Dandavis Ce que vous avez posté ne fonctionne pas même avec ma dernière tentative, mais nous sommes proches. Voir mon édition!
J'ai rencontré cela sur un projet avec les mêmes préoccupations concernant le système d'exploitation, les polices, le zoom, etc. J'ai créé une divisée sur le DOM avec les mêmes règles CSS que l'élément utilisé par l'utilisateur. J'ai ajouté le texte, l'a mesuré, a appliqué sa hauteur et sa largeur à l'autre élément utilisé par l'utilisateur, puis détruit la DIV temporaire. Dans ce cas, c'était pour un WYSIWG pour une application de rédaction, mais le principe est le même.
Nous avions également construit un éditeur WYSIWG! :) @radio, sur ce cas particulier de mien, savez-vous ce que je dois faire? Je n'ai pas touché le développement Web depuis des lustres, donc si je ne trouve aucune solution ici, je vais supprimer la fonctionnalité sans support pour le redimensionnement.
@Radio Comment avez-vous mesuré le texte? C'est ce que je ne peux pas le trouver!
Vous pouvez mesurer la largeur du texte avec un contexte 2D en toile.
Dupliqué possible de Auto Développer une textarea à l'aide de jQuery
@ G.samaras Voir ma réponse ci-dessous.