调整文本区域的事件大小? [英] Resize event for textarea? 查看：26 发布时间：2021/12/19 22:14:46 javascript jquery html events 本文介绍了调整文本区域的事件大小?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 当前版本的 Firefox 和 Chrome 包含一个拖动处理程序来调整 </code> 框的大小.我需要捕获调整大小事件，我认为使用 jQuery 的 <code>resize()</code> 事件会很容易，但它不起作用！<em class="showen"></em></p> <p class="en">The current versions of Firefox and Chrome include a drag handler to resize a <code><textarea></code> box. I need to capture the resizing event, I thought it would be easy with jQuery's <code>resize()</code> event, but it doesn't work!</p> <p class="cn">我也试过普通的 <code>onResize</code> 事件，但结果是一样的.<a href="http://jsfiddle.net/HhSYG/" rel="noreferrer">您可以在 JSFiddle 上试用</a>.<em class="showen"></em></p> <p class="en">I have also tried the normal <code>onResize</code> event, but the result is the same. You can try it on JSFiddle.</p> <p class="cn">有没有办法捕捉它?</p> <h3 class="best_ans mt-1">推荐答案</h3> <p class="cn">在发出 resize 事件之前，您需要先调整 textarea 的大小.您可以通过使用 jQuery UI <a href="http://jqueryui.com/demos/resizable/" rel="nofollow">resizable()</a> 来做到这一点，并在其中调用 resize 事件.<em class="showen"></em></p> <p class="en">You need to first make the textarea resizable before issuing the resize event. You can do that by using jQuery UI resizable() and inside it you can call the resize event. </p> <pre><code><code>$("textarea").resizable({ resize: function() { $("body").append("<pre>resized!</pre>"); } }); </code></code></pre> <p>这篇关于调整文本区域的事件大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p> </div> <div class="arc-body-main-more"> <span onclick="unlockarc('2690740');">查看全文</span> </div> </div> <div> </div> <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div> </div> </article> <div id="arc-ad-2" class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="widget bgwhite radius-1 mb-1 shadow widget-rel"> <h5>相关文章</h5> <ul> <li> <a target="_blank" title="自动调整文本区域的大小" href="/1493502.html"> 自动调整文本区域的大小; </a> </li> <li> <a target="_blank" title="如何根据内容调整文本区域的大小" href="/2118184.html"> 如何根据内容调整文本区域的大小; </a> </li> <li> <a target="_blank" title="创建具有自动调整大小的文本区域" href="/2626743.html"> 创建具有自动调整大小的文本区域; </a> </li> <li> <a target="_blank" title="根据内容自动调整文本区域的大小" href="/581334.html"> 根据内容自动调整文本区域的大小; </a> </li> <li> <a target="_blank" title="div可调整大小像文本区域" href="/563968.html"> div可调整大小像文本区域; </a> </li> <li> <a target="_blank" title="在输入时调整文本区域的大小" href="/2271068.html"> 在输入时调整文本区域的大小; </a> </li> <li> <a target="_blank" title="Rails 文本区域大小" href="/2386210.html"> Rails 文本区域大小; </a> </li> <li> <a target="_blank" title="寻找终极调整文本区域" href="/2838764.html"> 寻找终极调整文本区域; </a> </li> <li> <a target="_blank" title="更改文本区域的大小" href="/2529616.html"> 更改文本区域的大小; </a> </li> <li> <a target="_blank" title="更改文本区域的大小" href="/1895758.html"> 更改文本区域的大小; </a> </li> <li> <a target="_blank" title="Javascript/JQuery 使用 div/“grippie"调整文本区域的大小" href="/2376797.html"> Javascript/JQuery 使用 div/“grippie"调整文本区域的大小; </a> </li> <li> <a target="_blank" title="调整文本区域大小以适合加载jquery上的所有文本" href="/1011254.html"> 调整文本区域大小以适合加载jquery上的所有文本; </a> </li> <li> <a target="_blank" title="如何更改可调整大小的文本区域的光标?" href="/2224548.html"> 如何更改可调整大小的文本区域的光标?; </a> </li> <li> <a target="_blank" title="如何删除文本区域右下角的调整大小选项？" href="/2021594.html"> 如何删除文本区域右下角的调整大小选项？; </a> </li> <li> <a target="_blank" title="固定文本区域中的自动字体大小调整" href="/2481256.html"> 固定文本区域中的自动字体大小调整; </a> </li> <li> <a target="_blank" title="如何在查询移动设备中调整文本区域的大小?" href="/1500055.html"> 如何在查询移动设备中调整文本区域的大小?; </a> </li> <li> <a target="_blank" title="根据文本区域的宽度计算文本大小" href="/2790152.html"> 根据文本区域的宽度计算文本大小; </a> </li> <li> <a target="_blank" title="使用jQuery是否可以拖动和调整大小的文本框/文本区域?" href="/1494020.html"> 使用jQuery是否可以拖动和调整大小的文本框/文本区域?; </a> </li> <li> <a target="_blank" title="如何在 Sencha Touch 中创建可调整大小的文本区域?" href="/2437299.html"> 如何在 Sencha Touch 中创建可调整大小的文本区域?; </a> </li> <li> <a target="_blank" title="自动调整文本区域（多行的asp：文本框）" href="/263283.html"> 自动调整文本区域（多行的asp：文本框）; </a> </li> <li> <a target="_blank" title="清除文本区域并重置文本区域的字符数" href="/1491701.html"> 清除文本区域并重置文本区域的字符数; </a> </li> <li> <a target="_blank" title="调整文本大小的事件？" href="/691221.html"> 调整文本大小的事件？; </a> </li> <li> <a target="_blank" title="如何将特定文本从文本区域放到文本区域" href="/1200405.html"> 如何将特定文本从文本区域放到文本区域; </a> </li> <li> <a target="_blank" title="文本区域上的jQuery键按下事件" href="/1494346.html"> 文本区域上的jQuery键按下事件; </a> </li> <li> <a target="_blank" title="在javaFX中将文本区域自动调整为标签页" href="/579281.html"> 在javaFX中将文本区域自动调整为标签页; </a> </li> </ul> </div> <div class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="side"> <div class="widget widget-side bgwhite mb-1 shadow"> <h5>前端开发最新文章</h5> <ul> <li> <a target="_blank" title="为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？" href="/1996151.html"> 为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？; </a> </li> <li> <a target="_blank" title="错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接" href="/749568.html"> 错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接; </a> </li> <li> <a target="_blank" title="如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？" href="/1009885.html"> 如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？; </a> </li> <li> <a target="_blank" title="如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？" href="/884909.html"> 如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？; </a> </li> <li> <a target="_blank" title="警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件" href="/818517.html"> 警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件; </a> </li> <li> <a target="_blank" title="如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？" href="/343346.html"> 如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？; </a> </li> <li> <a target="_blank" title="此请求已被阻止;内容必须通过HTTPS提供" href="/886417.html"> 此请求已被阻止;内容必须通过HTTPS提供; </a> </li> <li> <a target="_blank" title="资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）" href="/562873.html"> 资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）; </a> </li> <li> <a target="_blank" title="通过HTTPS加载页面但请求不安全的XMLHttpRequest端点" href="/885901.html"> 通过HTTPS加载页面但请求不安全的XMLHttpRequest端点; </a> </li> <li> <a target="_blank" title="拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。" href="/47347.html"> 拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。; </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门教程 </h5> <ul> <li> <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html"> Java教程 </a> </li> <li> <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html"> Apache ANT 教程 </a> </li> <li> <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html"> Kali Linux教程 </a> </li> <li> <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html"> JavaScript教程 </a> </li> <li> <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html"> JavaFx教程 </a> </li> <li> <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html"> MFC 教程 </a> </li> <li> <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html"> Apache HTTP客户端教程 </a> </li> <li> <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html"> Microsoft Visio 教程 </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门工具 </h5> <ul> <li> <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4"> Java 在线工具 </a> </li> <li> <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6"> C(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8"> PHP 在线工具 </a> </li> <li> <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1"> C# 在线工具 </a> </li> <li> <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5"> Python 在线工具 </a> </li> <li> <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33"> MySQL 在线工具 </a> </li> <li> <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2"> VB.NET 在线工具 </a> </li> <li> <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14"> Lua 在线工具 </a> </li> <li> <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35"> Oracle 在线工具 </a> </li> <li> <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7"> C++(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20"> Go 在线工具 </a> </li> <li> <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45"> Fortran 在线工具 </a> </li> </ul> </div> </div> </div> <script type="text/javascript">var eskeys = '调整,文本,区域,的,事件,大小'; var cat = 'cc';';//qianduan</script> </div> <div id="pop" onclick="pophide();"> <div id="pop_body" onclick="event.stopPropagation();"> <h6 class="flex flex101"> 登录 <span onclick="pophide();">关闭</span> </h6> <div class="pd-1"> <div class="wxtip center"> <span>扫码关注<em>1秒</em>登录</span> </div> <div class="center"> <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" /> </div> <div style="margin-top:10px;display:flex;justify-content: center;"> <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" /> <input id="btngo" type="button" onclick="chk()" value="GO" /> </div> <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;"> 发送“验证码”获取 <em style="padding: 0 .5rem;">|</em> <span style="color: #01a05c;">15天全站免登陆</span> </div> <div id="chkinfo" class="tip"></div> </div> </div> </div> <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script> <footer class="footer"> <div class="container"> <div class="flink mb-1"> 友情链接： <a href="https://www.it1352.com/" target="_blank">IT屋</a> <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a> <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a> </div> <section class="copyright-section"> <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a> ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a> <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a> <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a> <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a> <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a> 本站内容来源互联网,如果侵犯您的权益请联系我们删除. </section> <!--统计代码--> <script type="text/javascript"> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript"> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> </footer> </body> </html>
