convertire la casella di testo in multilinea con jquery

Ho una casella di testo a riga singola.convertire la casella di testo in multilinea con jquery

Desidero con jQuery convertirlo in multilinea ma controllare quante linee vengono aggiunte ad esso. Voglio anche essere in grado di limitare il numero di caratteri su ciascuna linea.

Qualche idea su come posso farlo con jquery?

EDIT:

Sì, quello che volevo dire con testo era <input type="text">

EG. <input type="text" value="" name="txtTextBox1" id="xtTextBox1">

fonte

2010-08-25 amateur

Il termine "casella di testo" non è sufficientemente specifico. Questo sembra essere specifico per ASP.NET. jQuery non lo capisce. Comprende solo HTML. Non intendi HTML '' o forse ''? – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/157882/">BalusC</a></span> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">@BalusC Lo interpreterei come trasformando un 'input type = text' in' textarea'. Penso che ciò possa essere fatto distruggendo l'input e creando una textarea con lo stesso nome. – <span class="text-secondary"> <small> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">@Pekka: vero, ma c'è un'ambiguità nel termine e ho giudicato quello basato sulla posthistoria dell'OP. Può succedere che abbia già un '<textarea>' con una restrizione "singola linea" generata da una sorta di framework MVC. – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/157882/">BalusC</a></span> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> </div> <div class="answer-title"> <span class="text-logo margin-top-sm">A</span> <h2 class="title h4">risposta</h2> </div> <div class="item-description text-md markdown-body margin-bottom-40 voidso"> <article class="board-top-1 padding-top-10"> <div class="post-col vote-info"> <span class="count">0<i class="fa fa-thumbs-up"></i></span> </div> <div class="post-offset"> <div class="answer fmt"> <p>si Considerando hanno seguente codice HTML:</p> <pre><code class="prettyprint-override"><input type="text" class="myclasses" style="color: #123123" value="akira"/> </code></pre> <p>quindi utilizzando seguente frammento di codice:</p> <pre><code class="prettyprint-override">(function($) { $.fn.changeToTextArea = function(rows, columns) { var attrs = {}; var text = ""; $.each(this[0].attributes, function(idx, attr) { attrs[attr.nodeName] = attr.nodeValue; if(attr.nodeName == "value") { text = attr.nodeValue; } attrs["rows"] = rows; attrs["cols"] = columns; }); this.replaceWith(function() { return $("<textarea/>", attrs).append($(this).contents()).html(text); }); } })(jQuery); </code></pre> <p>si dovrebbe chiamare con</p> <pre><code class="prettyprint-override">$("input").changeToTextArea(7, 25); </code></pre> <p></p> <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code" id="sn1"> <pre class="snippet-code-js lang-js prettyprint-override"><code class="prettyprint-override">(function($) { $.fn.changeToTextArea = function(rows, columns) { var attrs = {}; var text = ""; $.each(this[0].attributes, function(idx, attr) { attrs[attr.nodeName] = attr.nodeValue; if(attr.nodeName == "value") { text = attr.nodeValue; } attrs["rows"] = rows; attrs["cols"] = columns; }); this.replaceWith(function() { return $("<textarea/>", attrs).append($(this).contents()).html(text); }); } })(jQuery); $("input").changeToTextArea(7, 25);</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code class="prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <input type="text" class="xyzxterms" style="color: #123131" value="akira"/></code></pre> </div> </div> <p></p> </div> <div class="post-info"> <div class="post-meta row"> <p class="text-secondary col-lg-6"> <span class="source"> <a rel="noopener" target="_blank" href="https://stackoverflow.com/q/41124468">fonte</a> </span> </p> <p class="text-secondary col-lg-6"> <span class="float-right date"> <span>2016-12-13 15:13:03</span> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/4022986/">aKiRa</a></span> </p> <p class="col-12"></p> <p class="col-12"></p></div> </div> </div> </article> <div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="1038284119" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="clearfix"> </div> <div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-6208739752673518" data-ad-slot="1575177025"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="padding-top-10"></div> </div> </div> <script type="text/javascript" src="http://img.uwenku.com/uwenku/script/side.js?t=1644592048671"></script> <script type="text/javascript" src="http://img.uwenku.com/uwenku/plugin/highlight/highlight.pack.js"></script> <link href="http://img.uwenku.com/uwenku/plugin/highlight/styles/docco.css" media="screen" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $('pre').each(function(i, e) { hljs.highlightBlock(e, "<span class='indent'> </span>", false) }); </script> <div class="col-lg-3 col-md-4 col-sm-5"> <div id="rightTop"> <div class="row"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="5415218910" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="row sidebar panel panel-default"> <div class="panel-heading font-bold"> Ultima domanda </div> <div class="m-b-sm m-t-sm clearfix"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://it.uwenku.com/question/p-stbsmvua-v.html" target="_blank" title="xcode 8 beta 3: Previsto ',' unire parti di una condizione multi-clausola"> xcode 8 beta 3: Previsto ',' unire parti di una condizione multi-clausola </a> </li> <li class="side_article_list_item"> 2. <a href="http://it.uwenku.com/question/p-ueqgoxij-p.html" target="_blank" title="Invia un modello NIFI tramite REST?"> Invia un modello NIFI tramite REST? </a> </li> <li class="side_article_list_item"> 3. <a href="http://it.uwenku.com/question/p-txyspmax-by.html" target="_blank" title="Importazione Theano: AttributeError: 'modulo' oggetto non ha attributo 'find_graphviz'"> Importazione Theano: AttributeError: 'modulo' oggetto non ha attributo 'find_graphviz' </a> </li> <li class="side_article_list_item"> 4. <a href="http://it.uwenku.com/question/p-ncdxiukw-bm.html" target="_blank" title="Come disconnettersi dai provider Owin?"> Come disconnettersi dai provider Owin? </a> </li> <li class="side_article_list_item"> 5. <a href="http://it.uwenku.com/question/p-ajyanvvt-v.html" target="_blank" title="Got JS Eccezione: ReferenceError: Impossibile trovare variabile: processo"> Got JS Eccezione: ReferenceError: Impossibile trovare variabile: processo </a> </li> <li class="side_article_list_item"> 6. <a href="http://it.uwenku.com/question/p-tynhxiyb-bp.html" target="_blank" title="ES6 classe super() con argomenti variadici"> ES6 classe super() con argomenti variadici </a> </li> <li class="side_article_list_item"> 7. <a href="http://it.uwenku.com/question/p-ylijxepu-m.html" target="_blank" title="Come disattivare l'evidenziazione della linea o modificarne il colore in Xcode 8?"> Come disattivare l'evidenziazione della linea o modificarne il colore in Xcode 8? </a> </li> <li class="side_article_list_item"> 8. <a href="http://it.uwenku.com/question/p-xkdhuicx-g.html" target="_blank" title="Animazione CSS3 non funziona Firefox"> Animazione CSS3 non funziona Firefox </a> </li> <li class="side_article_list_item"> 9. <a href="http://it.uwenku.com/question/p-avtjsilu-ce.html" target="_blank" title="È legale inizializzare più campi sovrapposti nell'elenco di inizializzazione di un membro del sindacato?"> È legale inizializzare più campi sovrapposti nell'elenco di inizializzazione di un membro del sindacato? </a> </li> <li class="side_article_list_item"> 10. <a href="http://it.uwenku.com/question/p-qppbkbpm-by.html" target="_blank" title="In Sublime: come passare da un riquadro all'altro in una visualizzazione a 2 colonne?"> In Sublime: come passare da un riquadro all'altro in una visualizzazione a 2 colonne? </a> </li> </ul> </div> </div> </div> <p class="article-nav-bar"></p> <div class="row sidebar article-nav"> <div class="row box_white visible-sm visible-md visible-lg margin-zero"> <div class="top"> <h3 class="title"><i class="glyphicon glyphicon-th-list"></i> Problemi correlati</h3> </div> <div class="article-relative-content"> <ul class="side_article_list"> <li class="side_article_list_item">Nessun problema correlato^_^</li> </ul> </div> </div> </div> </div> </div> </div> </div>  <footer id="footer"> <div class="bg-simple lt"> <div class="container"> <div class="row padder-v m-t"> <div class="col-xs-8"> <ul class="list-inline"> <li><a href="http://it.uwenku.com/contact">Contattaci</a></li> <li>© 2020 IT.UWENKU.COM</li> <li><a target="_blank" href="https://beian.miit.gov.cn/">沪ICP备13005482号-4</a></li> <li><script type="text/javascript" src="https://v1.cnzz.com/z_stat.php?id=1280101193&web_id=1280101193"></script></li> <li><a href="http://www.uwenku.com/" target="_blank" title="优文库">简体中文</a></li> <li><a href="http://hk.uwenku.com/" target="_blank" title="優文庫">繁體中文</a></li> <li><a href="http://ru.uwenku.com/" target="_blank" title="поле вопросов и ответов">Русский</a></li> <li><a href="http://de.uwenku.com/" target="_blank" title="Frage - und - antwort - Park">Deutsch</a></li> <li><a href="http://es.uwenku.com/" target="_blank" title="Preguntas y respuestas">Español</a></li> <li><a href="http://hi.uwenku.com/" target="_blank" title="कार्यक्रम प्रश्न और उत्तर पार्क">हिन्दी</a></li> <li><a href="http://it.uwenku.com/" target="_blank" title="IL Programma di chiedere Park">Italiano</a></li> <li><a href="http://ja.uwenku.com/" target="_blank" title="プログラム問答園区">日本語</a></li> <li><a href="http://ko.uwenku.com/" target="_blank" title="프로그램 문답 단지">한국어</a></li> <li><a href="http://pl.uwenku.com/" target="_blank" title="program o park">Polski</a></li> <li><a href="http://tr.uwenku.com/" target="_blank" title="Program soru ve cevap parkı">Türkçe</a></li> <li><a href="http://vi.uwenku.com/" target="_blank" title="Đáp ứng viên">Tiếng Việt</a></li> <li><a href="http://fr.uwenku.com/" target="_blank" title="Programme interrogation Park">Française</a></li> </ul> </div> </div> </div> </div> </div> </footer>  <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?f78a970f17b19a79fc477a3378096f29"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>