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="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="4319274062" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="clearfix"> </div> <div class="relative-box"> <div class="relative">Problemi correlati</div> <ul class="relative_list"> <li> 1. <a href="http://it.voidcc.com/question/p-alpikrio-p.html" target="_blank" title="itext testo multilinea nella casella di delimitazione"> itext testo multilinea nella casella di delimitazione </a> </li> <li> 2. <a href="http://it.voidcc.com/question/p-xdrtvaob-d.html" target="_blank" title="Come aggiungere testo in una casella di testo multilinea?"> Come aggiungere testo in una casella di testo multilinea? </a> </li> <li> 3. <a href="http://it.voidcc.com/question/p-mwcysjay-br.html" target="_blank" title="La casella di testo multilinea ancorata è coperta da StatusStrip"> La casella di testo multilinea ancorata è coperta da StatusStrip </a> </li> <li> 4. <a href="http://it.voidcc.com/question/p-elbfisbq-u.html" target="_blank" title="Casella di testo multilinea con scorrimento verticale automatico"> Casella di testo multilinea con scorrimento verticale automatico </a> </li> <li> 5. <a href="http://it.voidcc.com/question/p-fmxrpsyp-bq.html" target="_blank" title="Come creare una casella di testo multilinea in xamarin.forms"> Come creare una casella di testo multilinea in xamarin.forms </a> </li> <li> 6. <a href="http://it.voidcc.com/question/p-uwgqjite-m.html" target="_blank" title="Casella di testo vuota con Jquery"> Casella di testo vuota con Jquery </a> </li> <li> 7. <a href="http://it.voidcc.com/question/p-uvdhiihg-b.html" target="_blank" title="Validatore di espressioni regolari ASP per casella di testo multilinea"> Validatore di espressioni regolari ASP per casella di testo multilinea </a> </li> <li> 8. <a href="http://it.voidcc.com/question/p-wntvbmrp-n.html" target="_blank" title="WinForms: completamento automatico nella casella di testo multilinea"> WinForms: completamento automatico nella casella di testo multilinea </a> </li> <li> 9. <a href="http://it.voidcc.com/question/p-mgcgdazc-n.html" target="_blank" title="Rendi la casella di testo multilinea contenere più testo (C#, winform)"> Rendi la casella di testo multilinea contenere più testo (C#, winform) </a> </li> <li> 10. <a href="http://it.voidcc.com/question/p-czhhilco-q.html" target="_blank" title="Casella di testo con ritorno a capo in matplotlib?"> Casella di testo con ritorno a capo in matplotlib? </a> </li> <li> 11. <a href="http://it.voidcc.com/question/p-slasuarx-g.html" target="_blank" title="creazione di una casella di testo multilinea utilizzando la funzione Html.Helper"> creazione di una casella di testo multilinea utilizzando la funzione Html.Helper </a> </li> <li> 12. <a href="http://it.voidcc.com/question/p-aykbtlcw-bh.html" target="_blank" title="Controllo per la visualizzazione di testo multilinea?"> Controllo per la visualizzazione di testo multilinea? </a> </li> <li> 13. <a href="http://it.voidcc.com/question/p-tlyfyhzx-p.html" target="_blank" title="Modifica del campo password in testo con la casella di controllo con jQuery"> Modifica del campo password in testo con la casella di controllo con jQuery </a> </li> <li> 14. <a href="http://it.voidcc.com/question/p-mfkzkzne-cb.html" target="_blank" title="Come convertire HTML in testo usando jQuery?"> Come convertire HTML in testo usando jQuery? </a> </li> <li> 15. <a href="http://it.voidcc.com/question/p-mauaxxyq-bz.html" target="_blank" title="Semplice jQuery - nascondi casella di testo"> Semplice jQuery - nascondi casella di testo </a> </li> <li> 16. <a href="http://it.voidcc.com/question/p-gttygbfq-t.html" target="_blank" title="Jquery convalida vuota per casella di testo"> Jquery convalida vuota per casella di testo </a> </li> <li> 17. <a href="http://it.voidcc.com/question/p-zbmcgnnr-n.html" target="_blank" title="Recupera il valore da asp: casella di testo con JQuery"> Recupera il valore da asp: casella di testo con JQuery </a> </li> <li> 18. <a href="http://it.voidcc.com/question/p-fxmkdsho-bk.html" target="_blank" title="Come scorrere continuamente fino alla fine del testo nella casella di testo multilinea?"> Come scorrere continuamente fino alla fine del testo nella casella di testo multilinea? </a> </li> <li> 19. <a href="http://it.voidcc.com/question/p-zsjlbiju-bn.html" target="_blank" title="Testo multilinea in celle Excel"> Testo multilinea in celle Excel </a> </li> <li> 20. <a href="http://it.voidcc.com/question/p-urmwfzly-ca.html" target="_blank" title="Ag-Grid - Riga con testo multilinea"> Ag-Grid - Riga con testo multilinea </a> </li> <li> 21. <a href="http://it.voidcc.com/question/p-doznkvxh-e.html" target="_blank" title="JQuery Testo predefinito sulla casella di testo vuota"> JQuery Testo predefinito sulla casella di testo vuota </a> </li> <li> 22. <a href="http://it.voidcc.com/question/p-eyieqmnf-e.html" target="_blank" title="Corrispondenza testo multilinea con espressione regolare"> Corrispondenza testo multilinea con espressione regolare </a> </li> <li> 23. <a href="http://it.voidcc.com/question/p-gcynsrci-bp.html" target="_blank" title="Occorrenza multipla di un'espressione regolare in una casella di testo multilinea"> Occorrenza multipla di un'espressione regolare in una casella di testo multilinea </a> </li> <li> 24. <a href="http://it.voidcc.com/question/p-owwftwnf-bu.html" target="_blank" title="Come copiare il contenuto di una casella di testo multilinea negli Appunti in C#?"> Come copiare il contenuto di una casella di testo multilinea negli Appunti in C#? </a> </li> <li> 25. <a href="http://it.voidcc.com/question/p-gvpigrgu-bg.html" target="_blank" title="Cancella la casella di testo in Completamento automatico Jquery dopo la selezione"> Cancella la casella di testo in Completamento automatico Jquery dopo la selezione </a> </li> <li> 26. <a href="http://it.voidcc.com/question/p-kyaathbv-p.html" target="_blank" title="JQuery Casella di testo di completamento automatico su eventi selezionati"> JQuery Casella di testo di completamento automatico su eventi selezionati </a> </li> <li> 27. <a href="http://it.voidcc.com/question/p-bvfoimkq-y.html" target="_blank" title="Aggiornamento casella di testo durante la digitazione"> Aggiornamento casella di testo durante la digitazione </a> </li> <li> 28. <a href="http://it.voidcc.com/question/p-ekjaawsu-d.html" target="_blank" title="La casella di testo di input non è modificabile con jQuery Draggable?"> La casella di testo di input non è modificabile con jQuery Draggable? </a> </li> <li> 29. <a href="http://it.voidcc.com/question/p-ualhbzyx-c.html" target="_blank" title="Usando C#, come posso impostare le posizioni delle tabulazioni in una casella di testo multilinea?"> Usando C#, come posso impostare le posizioni delle tabulazioni in una casella di testo multilinea? </a> </li> <li> 30. <a href="http://it.voidcc.com/question/p-rymgulgy-n.html" target="_blank" title="C# - Casella di testo Newline Problemi"> C# - Casella di testo Newline Problemi </a> </li> </ul> </div> <div> <script async src="//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="3534119089"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="padding-top-10"></div> </div> </div> <script type="text/javascript" src="http://img2.voidcc.com/voidso/script/side.js?t=1652515422436"></script> <script type="text/javascript" src="http://img2.voidcc.com/voidso/plugin/highlight/highlight.pack.js"></script> <link href="http://img2.voidcc.com/voidso/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="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="3862022848" 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.voidcc.com/question/p-rachmgis-bp.html" target="_blank" title="Qual è il modo migliore per accedere al redux store all'esterno di un componente di reazione?"> Qual è il modo migliore per accedere al redux store all'esterno di un componente di reazione? </a> </li> <li class="side_article_list_item"> 2. <a href="http://it.voidcc.com/question/p-silgiqux-bd.html" target="_blank" title="Input di Internet Explorer: selezionato + etichetta: prima dello styling non eseguito"> Input di Internet Explorer: selezionato + etichetta: prima dello styling non eseguito </a> </li> <li class="side_article_list_item"> 3. <a href="http://it.voidcc.com/question/p-wezfbgbo-bg.html" target="_blank" title="lookup_fields multiple per Django quadro riposo"> lookup_fields multiple per Django quadro riposo </a> </li> <li class="side_article_list_item"> 4. <a href="http://it.voidcc.com/question/p-catfmaql-bo.html" target="_blank" title="Come interrompere time.sleep() in un python concurrent.futures"> Come interrompere time.sleep() in un python concurrent.futures </a> </li> <li class="side_article_list_item"> 5. <a href="http://it.voidcc.com/question/p-bwlpgkwc-z.html" target="_blank" title="Acquista Jenkins Pipeline Git SCM con credenziali?"> Acquista Jenkins Pipeline Git SCM con credenziali? </a> </li> <li class="side_article_list_item"> 6. <a href="http://it.voidcc.com/question/p-rfyrdnpy-x.html" target="_blank" title="Come posso test unitario e test di integrazione i miei pacchetti SSIS?"> Come posso test unitario e test di integrazione i miei pacchetti SSIS? </a> </li> <li class="side_article_list_item"> 7. <a href="http://it.voidcc.com/question/p-hjywjbqe-bk.html" target="_blank" title="Differenza tra Object.assign e l'oggetto si diffuse"> Differenza tra Object.assign e l'oggetto si diffuse </a> </li> <li class="side_article_list_item"> 8. <a href="http://it.voidcc.com/question/p-xgovutbx-z.html" target="_blank" title="Utilizzo di UpdateChildValues per eliminare da Firebase"> Utilizzo di UpdateChildValues per eliminare da Firebase </a> </li> <li class="side_article_list_item"> 9. <a href="http://it.voidcc.com/question/p-zinvdtjb-t.html" target="_blank" title="Ottenere il tipo di un typename o un'espressione"> Ottenere il tipo di un typename o un'espressione </a> </li> <li class="side_article_list_item"> 10. <a href="http://it.voidcc.com/question/p-phfnfqbm-bm.html" target="_blank" title="Panda unione DataFrames in base alla combinazione indice/colonna"> Panda unione DataFrames in base alla combinazione indice/colonna </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"> 1. <a href="http://it.voidcc.com/question/p-alpikrio-p.html" target="_blank" title="itext testo multilinea nella casella di delimitazione"> itext testo multilinea nella casella di delimitazione </a> </li> <li class="side_article_list_item"> 2. <a href="http://it.voidcc.com/question/p-xdrtvaob-d.html" target="_blank" title="Come aggiungere testo in una casella di testo multilinea?"> Come aggiungere testo in una casella di testo multilinea? </a> </li> <li class="side_article_list_item"> 3. <a href="http://it.voidcc.com/question/p-mwcysjay-br.html" target="_blank" title="La casella di testo multilinea ancorata è coperta da StatusStrip"> La casella di testo multilinea ancorata è coperta da StatusStrip </a> </li> <li class="side_article_list_item"> 4. <a href="http://it.voidcc.com/question/p-elbfisbq-u.html" target="_blank" title="Casella di testo multilinea con scorrimento verticale automatico"> Casella di testo multilinea con scorrimento verticale automatico </a> </li> <li class="side_article_list_item"> 5. <a href="http://it.voidcc.com/question/p-fmxrpsyp-bq.html" target="_blank" title="Come creare una casella di testo multilinea in xamarin.forms"> Come creare una casella di testo multilinea in xamarin.forms </a> </li> <li class="side_article_list_item"> 6. <a href="http://it.voidcc.com/question/p-uwgqjite-m.html" target="_blank" title="Casella di testo vuota con Jquery"> Casella di testo vuota con Jquery </a> </li> <li class="side_article_list_item"> 7. <a href="http://it.voidcc.com/question/p-uvdhiihg-b.html" target="_blank" title="Validatore di espressioni regolari ASP per casella di testo multilinea"> Validatore di espressioni regolari ASP per casella di testo multilinea </a> </li> <li class="side_article_list_item"> 8. <a href="http://it.voidcc.com/question/p-wntvbmrp-n.html" target="_blank" title="WinForms: completamento automatico nella casella di testo multilinea"> WinForms: completamento automatico nella casella di testo multilinea </a> </li> <li class="side_article_list_item"> 9. <a href="http://it.voidcc.com/question/p-mgcgdazc-n.html" target="_blank" title="Rendi la casella di testo multilinea contenere più testo (C#, winform)"> Rendi la casella di testo multilinea contenere più testo (C#, winform) </a> </li> <li class="side_article_list_item"> 10. <a href="http://it.voidcc.com/question/p-czhhilco-q.html" target="_blank" title="Casella di testo con ritorno a capo in matplotlib?"> Casella di testo con ritorno a capo in matplotlib? </a> </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.voidcc.com/contact">Contattaci</a></li> <li>© 2020 IT.VOIDCC.COM</li> <li><a rel="nofollow" href="https://beian.miit.gov.cn/" target="_blank">沪ICP备13005482号-13</a></li> <li><script type="text/javascript" src="https://s9.cnzz.com/z_stat.php?id=1280098168&web_id=1280098168"></script></li> <li><a href="http://cn.voidcc.com/" target="_blank" title="程序问答园区">简体中文</a></li> <li><a href="http://hk.voidcc.com/" target="_blank" title="程序問答園區">繁體中文</a></li> <li><a href="http://ru.voidcc.com/" target="_blank" title="поле вопросов и ответов">Русский</a></li> <li><a href="http://de.voidcc.com/" target="_blank" title="Frage - und - antwort - Park">Deutsch</a></li> <li><a href="http://es.voidcc.com/" target="_blank" title="Preguntas y respuestas">Español</a></li> <li><a href="http://hi.voidcc.com/" target="_blank" title="कार्यक्रम प्रश्न और उत्तर पार्क">हिन्दी</a></li> <li><a href="http://it.voidcc.com/" target="_blank" title="IL Programma di chiedere Park">Italiano</a></li> <li><a href="http://ja.voidcc.com/" target="_blank" title="プログラム問答園区">日本語</a></li> <li><a href="http://ko.voidcc.com/" target="_blank" title="프로그램 문답 단지">한국어</a></li> <li><a href="http://pl.voidcc.com/" target="_blank" title="program o park">Polski</a></li> <li><a href="http://tr.voidcc.com/" target="_blank" title="Program soru ve cevap parkı">Türkçe</a></li> <li><a href="http://vi.voidcc.com/" target="_blank" title="Đáp ứng viên">Tiếng Việt</a></li> <li><a href="http://fr.voidcc.com/" target="_blank" title="Programme interrogation Park">Française</a></li> </ul> </div> </div> </div> </div> </div> </footer>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-77509369-5"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-77509369-5'); </script> <script> var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?67d4731349f0b00136755b80364ce381"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>