问题

我想要有任何输入（在这种情况下，我猜是元素），就像WhatsApp或Telegram一样。默认情况下，它应该是1行。但当一行文本溢出时，它应该变成2行文本框。当第二行也溢出时，它应该变成3行文本框。反之亦然。我不知道如何实现这一点。我最初的想法是计算输入文本字符，然后根据符号的数量更改行数。但后来我意识到这是一个坏主意，因为不同的字符具有不同的宽度。当字体是Arial时，字符串"wwwwwwwwww"比"iiiiiiiiii"更宽，但两个字符串都有10个字符。</p> <details> <summary>英文:</summary> <p>I'd like to have any input ( <textarea> element in this case I guess) like in Whatsapp or Telegram. It should be 1 line by default. But when a line is overflown with text it should become 2-line textarea. And when the second line is also overflown, it should become a 3-line textarea. And vice versa.<br /> I have no idea how to implement this. My first thought was to count input text characters and then change the lines depending on the amount of symbols. But then I realized it was a bad idea because different characters have different width. And a string "wwwwwwwwww" is wider than "iiiiiiiiii" when the font is Arial, but both strings have 10 characters.</p> </details> <h1 id="1">答案1</h1> <p><strong>得分</strong>: 0</p> <p>根据scrollHeight属性更改textarea元素的高度。以下是使用jQuery的示例。如果仅用于单个textarea输入，可以简化代码。</p> <pre tabindex="0" style="color:#f8f8f2;background-color:#272822;"><code><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#e6db74">"#divContainingAutoSizingTextareas"</span>).<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">"keyup"</span>, <span style="color:#e6db74">"textarea:focus"</span>, <span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">e</span>) { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">textarea</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">":focus"</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">textarea</span>.<span style="color:#a6e22e">height</span>(<span style="color:#a6e22e">textarea</span>.<span style="color:#a6e22e">prop</span>(<span style="color:#e6db74">"scrollHeight"</span>) <span style="color:#f92672">-</span> <span style="color:#ae81ff">12</span>); </span></span><span style="display:flex;"><span>}) </span></span></code></pre> <p>以下是一个不使用jQuery的示例。重置高度的目的是在删除内容时使textarea缩小。+2的目的是调整可能导致不一致结果的任何样式 - 您可以轻松确定尺寸是否在一致调整，并相应地进行调整。</p> <pre tabindex="0" style="color:#f8f8f2;background-color:#272822;"><code><span style="display:flex;"><span>document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">"autoexpand"</span>).<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">"keyup"</span>, <span style="color:#66d9ef">function</span> () { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">textarea</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">"autoexpand"</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">textarea</span>.<span style="color:#a6e22e">style</span>.<span style="color:#a6e22e">height</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">"34px"</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">textarea</span>.<span style="color:#a6e22e">style</span>.<span style="color:#a6e22e">height</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">textarea</span>.<span style="color:#a6e22e">scrollHeight</span> <span style="color:#f92672">+</span> <span style="color:#ae81ff">2</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">"px"</span>; </span></span><span style="display:flex;"><span>}) </span></span></code></pre> <details> <summary>英文:</summary> <p>Change the height of the textarea element based on the scrollHeight property. Here is an example using jQuery. It could be simplified if used for a single textarea input.</p> <pre><code>$("#divContainingAutoSizingTextareas").on("keyup", "textarea:focus", function (e) { var textarea = $(":focus"); textarea.height(textarea.prop("scrollHeight") - 12); }) </code></pre> <p>Here is an example without jQuery. The purpose of resetting height is to cause the textarea to shrink when content is removed. The purpose of the + 2 is to adjust for any styling that may make inconsistent results -- you can easily determine if the sizing is adjusting consistently and adjust accordingly.</p> <pre><code>document.getElementById("autoexpand").addEventListener("keyup", function () { var textarea = document.getElementById("autoexpand"); textarea.style.height = "34px"; textarea.style.height = textarea.scrollHeight + 2 + "px"; }) </code></pre> </details> </p> </div> <div class="copyright-post betip" > <div class="be-nav-l"> <div class="be-nav-logo"> <div class="logo-site"> <div class="site-name-main"> <p class="site-description">通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。</p> </div> </div> </div> </div> </div> <div class="clear"></div> <div class="turn-small"></div> <div class="sharing-box betip" data-aos="zoom-in"> <a class="be-btn-beshare be-btn-donate use-beshare-donate-btn" rel="external nofollow" data-hover="打赏"><div class="arrow-share"></div></a> <a class="be-btn-beshare be-btn-like use-beshare-like-btn" data-count="0" rel="external nofollow"> <span class="sharetip bz like-number"> 点赞 </span> <div class="triangle-down"></div> </a> <a class="be-btn-beshare be-btn-share use-beshare-social-btn" rel="external nofollow" data-hover="分享"><div class="arrow-share"></div></a> <span class="post-link">https://go.coder-hub.com/75656287.html</span> <a class="tooltip be-btn-beshare be-btn-link be-btn-link-b use-beshare-link-btn" rel="external nofollow" onclick="myFunction()" onmouseout="outFunc()"><span class="sharetip bz copytip">复制链接</span></a> <a class="tooltip be-btn-beshare be-btn-link be-btn-link-l use-beshare-link-btn" rel="external nofollow" onclick="myFunction()" onmouseout="outFunc()"><span class="sharetip bz copytipl">复制链接</span></a> <a class="be-btn-beshare be-share-poster use-beshare-poster-btn" rel="external nofollow" data-hover="海报"><div class="arrow-share"></div></a> </div> <div class="content-empty"></div> <footer class="single-footer"> <div class="single-cat-tag dah"><div class="single-cat dah"><i class="be be-sort"></i><a href="https://go.coder-hub.com/category/go" rel="category tag">go</a></div></div> </footer> <div class="clear"></div> </div> </article> <div class="authorbio ms load betip" data-aos=fade-up> <img class="avatar photo" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" alt="huangapple" width="96" height="96" data-original="https://go.coder-hub.com/wp-content/uploads/2023/08/1_avatar-96x96.png" /> <ul class="spostinfo"> <li>本文由 <strong><a href="https://go.coder-hub.com/author/huangapple" title="文章作者 huangapple" rel="author">huangapple</a></strong> 发表于 2023年3月7日 06:08:14</li> <li class="reprinted"><strong>转载请务必保留本文链接：</strong>https://go.coder-hub.com/75656287.html</li> </ul> <div class="clear"></div> </div> <div class="single-code-tag betip"> <div class='clear'></div> <div class="apc-ajax-post-item-wrap ajax-cat-post-wrap" data-more="more" data-apc-ajax-post-item='{"show_filter":"yes","btn":"yes","btn_all":"no","initial":"-1","layout":"1","post_type":"post","posts_per_page":"4","cat":"1212,835","terms":"","paginate":"no","hide_empty":"true","orderby":"rand","order":"DESC","meta_key":"","more":"more","mid":"","style":"photo","listimg":"","column":"4","infinite":"","animation":"","item_id":"","slider":"","tags":"tag","special":"","prev_next":"true","img":"","sticky":"","children":"true"}'> <div class="acx-filter-div" data-layout="1"> <ul> <li class="bea-texonomy ms apc-cat-btu" data_id="1212" data-aos=fade-up>css</li> <li class="bea-texonomy ms apc-cat-btu" data_id="835" data-aos=fade-up>javascript</li> </ul> </div> <div class="acx-ajax-container"> <div class="acx-loader"> <div class="dual-ring"></div> </div> <div class="beall-filter-result"> <div class="apc-postitem-wrapper"> <section class="picture-area content-area grid-cat-4"> <div class="apc-post-item apc_layout_1 "> <article id="post-158745" class="post-item-list post picture scl" data-aos="zoom-in" > <div class="picture-box sup"> <figure class="picture-img gdz"> <div class="thumbs-b lazy"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/75403957.html" data-src="https://cdn.coder-hub.com/wp/img/3.jpg"></a></div> </figure> <h2 class="grid-title gdz"><a href="https://go.coder-hub.com/75403957.html" rel="bookmark">BrowserRouter显示空白页面。</a></h2> <span class="grid-inf gdz"> <span class="grid-author"><a href="https://go.coder-hub.com/author/huangapple" rel="author"> <span class="meta-author grid-meta-author"> <span class="meta-author-avatar load"> <img class="avatar photo" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" alt="huangapple" width="96" height="96" data-original="https://go.coder-hub.com/wp-content/uploads/2023/08/1_avatar-96x96.png" /> </span> </span> </a> </span> <span class="g-cat"><a href="https://go.coder-hub.com/category/go">go</a></span> <span class="grid-inf-l"> <span class="views"><i class="be be-eye ri"></i>73</span> <span class="date"><time datetime="2023-02-10 04:13:10">02/10</time></span> </span> </span> <div class="clear"></div> </div> </article> <article id="post-122449" class="post-item-list post picture scl" data-aos="zoom-in" > <div class="picture-box sup"> <figure class="picture-img gdz"> <div class="thumbs-b lazy"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/76435800.html" data-src="https://i.stack.imgur.com/AfPMd.jpg"></a></div> </figure> <h2 class="grid-title gdz"><a href="https://go.coder-hub.com/76435800.html" rel="bookmark">在 flex 列中放置一个响应式的正方形。</a></h2> <span class="grid-inf gdz"> <span class="grid-author"><a href="https://go.coder-hub.com/author/huangapple" rel="author"> <span class="meta-author grid-meta-author"> <span class="meta-author-avatar load"> <img class="avatar photo" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" alt="huangapple" width="96" height="96" data-original="https://go.coder-hub.com/wp-content/uploads/2023/08/1_avatar-96x96.png" /> </span> </span> </a> </span> <span class="g-cat"><a href="https://go.coder-hub.com/category/go">go</a></span> <span class="grid-inf-l"> <span class="views"><i class="be be-eye ri"></i>65</span> <span class="date"><time datetime="2023-06-09 05:27:52">06/09</time></span> </span> </span> <div class="clear"></div> </div> </article> <article id="post-93121" class="post-item-list post picture scl" data-aos="zoom-in" > <div class="picture-box sup"> <figure class="picture-img gdz"> <div class="thumbs-b lazy"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/59608124.html" data-src="https://cdn.coder-hub.com/wp/img/12.jpg"></a></div> </figure> <h2 class="grid-title gdz"><a href="https://go.coder-hub.com/59608124.html" rel="bookmark">Node-oracledb：循环中只插入最后一个值多次。</a></h2> <span class="grid-inf gdz"> <span class="grid-author"><a href="https://go.coder-hub.com/author/huangapple" rel="author"> <span class="meta-author grid-meta-author"> <span class="meta-author-avatar load"> <img class="avatar photo" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" alt="huangapple" width="96" height="96" data-original="https://go.coder-hub.com/wp-content/uploads/2023/08/1_avatar-96x96.png" /> </span> </span> </a> </span> <span class="g-cat"><a href="https://go.coder-hub.com/category/go">go</a></span> <span class="grid-inf-l"> <span class="views"><i class="be be-eye ri"></i>96</span> <span class="date"><time datetime="2020-01-06 15:20:27">01/06</time></span> </span> </span> <div class="clear"></div> </div> </article> <article id="post-108564" class="post-item-list post picture scl" data-aos="zoom-in" > <div class="picture-box sup"> <figure class="picture-img gdz"> <div class="thumbs-b lazy"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/76670653.html" data-src="https://cdn.coder-hub.com/wp/img/7.jpg"></a></div> </figure> <h2 class="grid-title gdz"><a href="https://go.coder-hub.com/76670653.html" rel="bookmark">使用正则表达式替换第二个正斜杠后的字符串。</a></h2> <span class="grid-inf gdz"> <span class="grid-author"><a href="https://go.coder-hub.com/author/huangapple" rel="author"> <span class="meta-author grid-meta-author"> <span class="meta-author-avatar load"> <img class="avatar photo" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" alt="huangapple" width="96" height="96" data-original="https://go.coder-hub.com/wp-content/uploads/2023/08/1_avatar-96x96.png" /> </span> </span> </a> </span> <span class="g-cat"><a href="https://go.coder-hub.com/category/go">go</a></span> <span class="grid-inf-l"> <span class="views"><i class="be be-eye ri"></i>77</span> <span class="date"><time datetime="2023-07-12 20:40:25">07/12</time></span> </span> </span> <div class="clear"></div> </div> </article> </div> <div class="clear"></div> <div class="apc-posts-navigation" data-aos="zoom-in" > <div class='clear ajax-navigation'></div><div data-paged='1' data-next='2' class=' apc-post-item-load-more'><span class='apc-load-more'><i class='be be-more'></i></span></div> <div class='clear'></div> </div> </section> </div> </div> </div> </div> </div> <div class="slider-rolling-box ms betip" data-aos=fade-up> <div id="slider-rolling" class="owl-carousel be-rolling single-rolling"> <div id="post-104802" class="post-item-list post scrolling-img"> <div class="scrolling-thumbnail"><div class="thumbs-sg"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/76881483.html" style="background-image: url(https://cdn.coder-hub.com/wp/img/18.jpg);"></a></div></div> <div class="clear"></div> <h2 class="grid-title over"><a href="https://go.coder-hub.com/76881483.html" target="_blank" rel="bookmark">What's the correct way to type hint an empty list as a literal in python?</a></h2> <div class="clear"></div> </div> <div id="post-104801" class="post-item-list post scrolling-img"> <div class="scrolling-thumbnail"><div class="thumbs-sg"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/76881482.html" style="background-image: url(https://i.stack.imgur.com/qaeHV.png);"></a></div></div> <div class="clear"></div> <h2 class="grid-title over"><a href="https://go.coder-hub.com/76881482.html" target="_blank" rel="bookmark">如何在Highcharts Gantt中更改本地化的星期名称</a></h2> <div class="clear"></div> </div> <div id="post-104797" class="post-item-list post scrolling-img"> <div class="scrolling-thumbnail"><div class="thumbs-sg"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/76881472.html" style="background-image: url(https://cdn.coder-hub.com/wp/img/12.jpg);"></a></div></div> <div class="clear"></div> <h2 class="grid-title over"><a href="https://go.coder-hub.com/76881472.html" target="_blank" rel="bookmark">如何在同一个流中使用多个过滤器和映射函数？</a></h2> <div class="clear"></div> </div> <div id="post-104794" class="post-item-list post scrolling-img"> <div class="scrolling-thumbnail"><div class="thumbs-sg"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/76881464.html" style="background-image: url(https://cdn.coder-hub.com/wp/img/1.jpg);"></a></div></div> <div class="clear"></div> <h2 class="grid-title over"><a href="https://go.coder-hub.com/76881464.html" target="_blank" rel="bookmark">如何使用Map/Set来将代码优化到O(n)？</a></h2> <div class="clear"></div> </div> <div id="post-104788" class="post-item-list post scrolling-img"> <div class="scrolling-thumbnail"><div class="thumbs-sg"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/76881458.html" style="background-image: url(https://cdn.coder-hub.com/wp/img/9.jpg);"></a></div></div> <div class="clear"></div> <h2 class="grid-title over"><a href="https://go.coder-hub.com/76881458.html" target="_blank" rel="bookmark">.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。</a></h2> <div class="clear"></div> </div> <div id="post-104782" class="post-item-list post scrolling-img"> <div class="scrolling-thumbnail"><div class="thumbs-sg"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/76881430.html" style="background-image: url(https://cdn.coder-hub.com/wp/img/33.jpg);"></a></div></div> <div class="clear"></div> <h2 class="grid-title over"><a href="https://go.coder-hub.com/76881430.html" target="_blank" rel="bookmark">如何在Playwright视觉比较中屏蔽多个定位器？</a></h2> <div class="clear"></div> </div> <div id="post-104777" class="post-item-list post scrolling-img"> <div class="scrolling-thumbnail"><div class="thumbs-sg"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/76881423.html" style="background-image: url(https://cdn.coder-hub.com/wp/img/20.jpg);"></a></div></div> <div class="clear"></div> <h2 class="grid-title over"><a href="https://go.coder-hub.com/76881423.html" target="_blank" rel="bookmark">在C++中，可以使用可变模板参数来检索类型的内部类型。</a></h2> <div class="clear"></div> </div> <div id="post-104775" class="post-item-list post scrolling-img"> <div class="scrolling-thumbnail"><div class="thumbs-sg"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/76881422.html" style="background-image: url(https://cdn.coder-hub.com/wp/img/9.jpg);"></a></div></div> <div class="clear"></div> <h2 class="grid-title over"><a href="https://go.coder-hub.com/76881422.html" target="_blank" rel="bookmark">selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found</a></h2> <div class="clear"></div> </div> <div id="post-104768" class="post-item-list post scrolling-img"> <div class="scrolling-thumbnail"><div class="thumbs-sg"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/76881370.html" style="background-image: url(https://cdn.coder-hub.com/wp/img/27.jpg);"></a></div></div> <div class="clear"></div> <h2 class="grid-title over"><a href="https://go.coder-hub.com/76881370.html" target="_blank" rel="bookmark">Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)</a></h2> <div class="clear"></div> </div> <div id="post-104316" class="post-item-list post scrolling-img"> <div class="scrolling-thumbnail"><div class="thumbs-sg"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/76879368.html" style="background-image: url(https://cdn.coder-hub.com/wp/img/5.jpg);"></a></div></div> <div class="clear"></div> <h2 class="grid-title over"><a href="https://go.coder-hub.com/76879368.html" target="_blank" rel="bookmark">AG Grid 在上下文菜单中以大文本形式打开</a></h2> <div class="clear"></div> </div> </div> </div>  <div id="comments" class="comments-area"> <div class="scroll-comments"></div> <div id="respond" class="comment-respond ms" data-aos=fade-up> <form action="https://go.coder-hub.com/wp-comments-post.php" method="post" id="commentform"> <div class="comment-user-inf"> <div class="user-avatar load"> <img alt="匿名" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-original="https://go.coder-hub.com/wp-content/themes/begin/img/favicon.png"> </div> <div class="comment-user-inc"> <h3 id="reply-title" class="comment-reply-title"><span>发表评论</span></h3> <span class="comment-user-name">匿名网友</span> <span class="comment-user-alter"></span> </div> </div> <div class="gravatar-apply"> <a href="https://weavatar.com/" rel="external nofollow" target="_blank" title="申请头像"></a> </div> <div class="comment-form-comment"> <textarea id="comment" class="dah" name="comment" rows="4" tabindex="30" placeholder="赠人玫瑰，手留余香..." onfocus="this.placeholder=''" onblur="this.placeholder='赠人玫瑰，手留余香...'">

确定

昵称

邮箱

网址

Address

取消