Metin giriş kutusu jQuery kullanılarak sağ alt köşesini sürükleyerek yeniden boyutlandırılabilir (textarea gibi) nasıl yapılır?

Sağ alt köşesi (örneğin, Chrome'daki metin dokusunda olduğu gibi) ile tıklatılıp sürüklenebilen ve kullanıcı tarafından yeniden boyutlandırılabilen (tercihen jQuery'de) normal metin giriş kutusuna sahip olmak isterim.Metin giriş kutusu jQuery kullanılarak sağ alt köşesini sürükleyerek yeniden boyutlandırılabilir (textarea gibi) nasıl yapılır?

Bunu zaten uygulayan herhangi bir jQuery eklentisi bulamıyor. Böyle bir şey varsa veya nasıl kolayca uygulanabiliyorsa bana ipucu verebilir mi?

Önceden teşekkür ederiz.

DÜZENLEME:

kaynak

2011-12-20 Frodik

'sizin için istiyor musunuz ' boyutlandırılabilir olunur? Yoksa Chrome ve Firefox'un tüm tarayıcılarına "" davranışı çoğaltılmasını ister misiniz? – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/938516/">Interrobang</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">Kötü bir açıklama için özür dilerim. Yeniden boyutlandırılabilmek için <input type = "text" /> istiyorum. Bu davranış örneği, Chrome'da textarea idi .... – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/385264/">Frodik</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">+1</span></div> <div class="col-lg-11"> <p class="commenttext">Bir '<input type = "text" /> 'elemanının yeniden boyutlandırılması anlamsız, bir textarea'ya dönüştürmezsiniz, tek bir satır öğesi olarak kalır. Bazı durumlarda yararlı olabilecek yatay uzantıyı aradığınız sürece. – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/187018/">ChrisR</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">cevap</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">12<i class="fa fa-thumbs-up"></i></span> <i class="fa fa-check fa-2x"></i> </div> <div class="post-offset"> <div class="answer fmt"> <p>Bunu yapmak için jQuery'ye ihtiyacınız yoktur. İhtiyacın olan şey css. </p> <pre><code class="prettyprint-override">#yourTextInput{ resize:both; } </code></pre> <p>Bu</p> Metin girişi biraz daha karmaşıktır sağ <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/8572371">kaynak</a> </span> </p> <p class="text-secondary col-lg-6"> <span class="float-right date"> <span>2011-12-20 08:00:59</span> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/548322/">XepterX</a></span> </p> <p class="col-12"></p> <p class="col-12"></p></div> </div>  <div class="comments"> <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">Vay, teşekkür ederim, bu kadar kolay ve şık bir çözüm. Bu CSS özelliğini bilmiyordum. Teşekkürler. – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/385264/">Frodik</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">Yardımın içindeyim, memnuniyetle tavsiye ediyorum – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/548322/">XepterX</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">+23</span></div> <div class="col-lg-11"> <p class="commenttext">Yeniden boyutlandırma CSS özelliğinin özellikleri arasında bir şey mi değişti? Artık girdi öğeleri üzerinde çalışmıyor, örneğin: http://jsfiddle.net/cbw7q/1/ Bu konuda herhangi bir bilgisi olan var mı? – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/385264/">Frodik</a></span> <span></span> </small> </span> </p> </div> </div> </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> <article class="board-top-1 padding-top-10"> <div class="post-col vote-info"> <span class="count">1<i class="fa fa-thumbs-up"></i></span> </div> <div class="post-offset"> <div class="answer fmt"> <p>Eğer <a href="http://api.jqueryui.com/resizable/" rel="nofollow">jQuery UI resizable widget</a> baktınız mı ... textarea Chrome'da olduğu benzer gibi yeniden boyutlandırılabilir olmak istiyorum?</p> <p>İşte <a href="http://jqueryui.com/resizable/#textarea" rel="nofollow">source code for just the resizable example</a>.</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/8572244">kaynak</a> </span> </p> <p class="text-secondary col-lg-6"> <span class="float-right date"> <span>2011-12-20 07:49:35</span> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/101811/">PatrikAkerstrand</a></span> </p> <p class="col-12"></p> <p class="col-12"></p></div> </div> </div> </article> <article class="board-top-1 padding-top-10"> <div class="post-col vote-info"> <span class="count">2<i class="fa fa-thumbs-up"></i></span> </div> <div class="post-offset"> <div class="answer fmt"> <p>Anno 2016 tarihinde yeniden boyutlandırma seçeneği sağlayacaktır. Eğer yeniden boyutlandırılabilir yapılmış bir "inline-block" içinde <code class="prettyprint-override"><input></code> kaydırmak gerekir:</p> <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-css lang-css prettyprint-override"><code class="prettyprint-override">.resizable-input { /* make resizable */ overflow-x: hidden; resize: horizontal; display: inline-block; /* no extra spaces */ padding: 0; margin: 0; white-space: nowrap; /* default widths */ width: 10em; min-width: 2em; max-width: 30em; } /* let <input> assume the size of the wrapper */ .resizable-input > input { width: 100%; box-sizing: border-box; margin: 0; } /* add a visible handle */ .resizable-input > span { display: inline-block; vertical-align: bottom; margin-left: -16px; width: 16px; height: 16px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAJUlEQVR4AcXJRwEAIBAAIPuXxgiOW3xZYzi1Q3Nqh+bUDk1yD9sQaUG/4ehuEAAAAABJRU5ErkJggg=="); cursor: ew-resize; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code class="prettyprint-override"><span class="resizable-input"><input type="text" /><span></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/37353078">kaynak</a> </span> </p> <p class="text-secondary col-lg-6"> <span class="float-right date"> <span>2016-05-20 18:01:33</span> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/416224/">kay</a></span> </p> <p class="col-12"></p> <p class="col-12"></p></div> </div> </div> </article> </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=1644592048964"></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"> Son soru </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://tr.uwenku.com/question/p-xxlewojl-w.html" target="_blank" title="Tensorflow'da tf.estimator'da tensorflow hata ayıklama aracı tfdbg nasıl kullanılır?"> Tensorflow'da tf.estimator'da tensorflow hata ayıklama aracı tfdbg nasıl kullanılır? </a> </li> <li class="side_article_list_item"> 2. <a href="http://tr.uwenku.com/question/p-ujjhizvp-t.html" target="_blank" title="Symfony Web sunucusu index.php mesaji gerektiriyor"> Symfony Web sunucusu index.php mesaji gerektiriyor </a> </li> <li class="side_article_list_item"> 3. <a href="http://tr.uwenku.com/question/p-tlvrxsvp-v.html" target="_blank" title="Erişme HDF'ler - zeplin"> Erişme HDF'ler - zeplin </a> </li> <li class="side_article_list_item"> 4. <a href="http://tr.uwenku.com/question/p-pmjjnfoc-y.html" target="_blank" title="Divanda bazı metinlerin seçilmesi nasıl devre dışı bırakılır?"> Divanda bazı metinlerin seçilmesi nasıl devre dışı bırakılır? </a> </li> <li class="side_article_list_item"> 5. <a href="http://tr.uwenku.com/question/p-czwtftok-e.html" target="_blank" title="Bootstrap 4 Sekmeden Akordeon'a. Nasıl?"> Bootstrap 4 Sekmeden Akordeon'a. Nasıl? </a> </li> <li class="side_article_list_item"> 6. <a href="http://tr.uwenku.com/question/p-snvbczkj-d.html" target="_blank" title="Yığılmış std :: array kullanılarak çok boyutlu dizinin bildirilmesinde neden "çift parantez" gerekir? kimse bu gibi tek parantez tek çifti ile tüm parantez iş yok alabilirsiniz rağmen"> Yığılmış std :: array kullanılarak çok boyutlu dizinin bildirilmesinde neden "çift parantez" gerekir? kimse bu gibi tek parantez tek çifti ile tüm parantez iş yok alabilirsiniz rağmen </a> </li> <li class="side_article_list_item"> 7. <a href="http://tr.uwenku.com/question/p-bxjzqqan-g.html" target="_blank" title="Hiç tanımlanmayan/bildirilmeyen bir C sabitine başvurmanın bir yolu var mı?"> Hiç tanımlanmayan/bildirilmeyen bir C sabitine başvurmanın bir yolu var mı? </a> </li> <li class="side_article_list_item"> 8. <a href="http://tr.uwenku.com/question/p-yzbbbwiu-k.html" target="_blank" title="İlişkisel olmayan veritabanlarında gereksiz veriler nasıl önlenir?"> İlişkisel olmayan veritabanlarında gereksiz veriler nasıl önlenir? </a> </li> <li class="side_article_list_item"> 9. <a href="http://tr.uwenku.com/question/p-exjuyvsy-e.html" target="_blank" title="Nullptr düzgün bir şekilde nasıl kullanılır?"> Nullptr düzgün bir şekilde nasıl kullanılır? </a> </li> <li class="side_article_list_item"> 10. <a href="http://tr.uwenku.com/question/p-wpaxwfpm-s.html" target="_blank" title="güvenlik"> güvenlik </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> İlgili konular</h3> </div> <div class="article-relative-content"> <ul class="side_article_list"> <li class="side_article_list_item">İlgili sorun yok^_^</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://tr.uwenku.com/contact">Bize ulaşın</a></li> <li>© 2020 TR.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>