微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

Javascript 文本框textarea高度随内容自适应增长收缩_表单特效

php中文网
发布： 2016-05-16 18:04:55
原创
1650人浏览过

直接上代码：
方案一：


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

方案一在各浏览器中，文本框随内容自适应增长都没有问题；但在删除内容时收缩方面表现有所差异，IE、Opera表现正常，Firefox、Chrome、Safari不会收缩。原因是文本框内容高度小于文本框高度时scrollHeight值等于文本框高度，而不是文本框内容高度。
方案二：
复制代码 代码如下:






枫芸志 » 文本框textarea高度自适应增长/伸缩







方案二在各浏览器中表现相同，皆可使文本框随内容自适应增长和收缩。但有个缺憾是在文本框高度增长的时候，文本框显示会有一个跳动。
另以上两个方案对于通过文本框右键菜单选择剪切、粘贴、删除等命令操作文本内容的情形都无效。可以说暂未找到完美的解决方案，留待以后再来研究。哪位同学如果有完美的方案的话敬请赐教！ 


其他方案：

绘蛙-多图成片
绘蛙-多图成片

绘蛙新推出的AI图生视频工具

绘蛙-多图成片 133
查看详情 绘蛙-多图成片
  1. A different approach to elastic textareas 方案二即参考此文后实现
  2. Build an Elastic Textarea with Ext JS
  3. Smart TextArea: scrollHeight in IE, Firefox, Opera and Safari

原文链接:http://witmax.cn/javascript-textarea-auto-grow.html

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：遨游，飞飞，IE，空中网 浏览器无提示关闭方法_javascript技巧 下一篇：一款Jquery 分页插件的改造方法（服务器端分页）_jquery
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
React createRef 深度解析：为何推荐使用而非自定义Ref对象？ React的createRef()API用于创建Refs，尽管其内部实现看似简单，仅返回一个带有current属性的普通对象，导致开发者疑惑为何不直接使用自定义对象。实际上，createRef提供了与React机制更佳的兼容性、代码可读性及未来可扩展性。它确保了Ref在Ref转发等高级场景中的一致性和健壮性，是React官方推荐的标准化Ref创建方式，而非简单的语法糖。
2025-11-23 11:35:30
620
掌握JavaScript模块化导入：在HTML中正确引入JS类 本文旨在解决在HTML文件中导入JavaScript类时遇到的常见问题，特别是关于ES模块的正确使用。我们将详细讲解如何通过type="module"属性以及在import语句中指定完整的文件扩展名来成功导入和使用JavaScript类，并提供清晰的代码示例和注意事项，确保开发者能够顺利实现模块化开发。
2025-11-23 11:28:02
668
在Go Web应用中通过AJAX发送下拉列表数据至服务器 本教程详细阐述了如何在Go语言开发的Web应用中，利用JavaScript和AJAX技术将HTML下拉列表的选中数据发送到服务器。通过客户端监听列表项点击事件，捕获选中值，并使用XMLHttpRequest发起POST请求，实现前后端的数据交互，为进一步的服务器端逻辑处理奠定基础。
2025-11-23 11:08:51
266
解决Outlook插件中按钮事件重复触发的问题：构建配置与缓存管理 在Outlook插件开发中，按钮事件重复触发通常源于构建配置不当，导致脚本文件被重复加载。本文将深入探讨此问题的常见原因，特别是Webpack等打包工具可能引起的脚本冗余，并提供一套系统的解决方案，包括优化构建输出、清理Office缓存以及开发最佳实践，确保事件仅被正确注册和执行一次。
2025-11-23 11:08:02
920
使用纯JavaScript实现可持久化用户偏好的暗黑模式切换 本教程详细介绍了如何使用纯JavaScript实现一个暗黑模式切换功能。通过一个简单的切换按钮，用户可以轻松地在亮/暗模式之间切换，并且系统会利用localStorage记住用户的选择，确保在页面重新加载后依然保持用户偏好，无需依赖任何第三方库。
2025-11-23 11:04:35
710
深入理解JavaScript中立即调用类表达式（IICE）及其继承机制 本文深入探讨JavaScript中立即调用类表达式（ImmediatelyInvokedClassExpression,IICE）的执行机制，特别是当其涉及多层继承时。我们将通过一个嵌套的类表达式实例，详细解析其构造函数调用顺序、this上下文的绑定，以及实例属性的初始化时机，揭示常见的潜在陷阱并提供解决方案，帮助开发者更好地理解和运用复杂的类结构。
2025-11-23 10:52:08
630
JavaScript工程化_Tree Shaking原理 TreeShaking是一种基于ES6模块静态分析的构建优化技术，通过标记清除未使用的导出代码来减小打包体积。它依赖import/export语法，在Webpack、Rollup等工具中启用生产模式后自动生效，要求模块无副作用或在package.json中正确声明sideEffects，以确保未引用代码被安全移除。
2025-11-23 10:52:03
192
解决 Outlook Add-in 按钮重复触发事件的问题 本文旨在解决Outlook加载项中按钮点击事件重复触发的问题，其根本原因通常是Webpack配置不当导致同一事件监听器被重复加载，以及Office缓存未及时清理。教程将详细指导如何检查并优化Webpack配置，确保仅加载一次JavaScript逻辑，并强调清理Office缓存的重要性，以保证加载项行为的正确性和一致性。
2025-11-23 10:47:01
263
JavaScript设备方向_陀螺仪数据获取 通过监听deviceorientation事件获取alpha、beta、gamma三个角度值，可实现设备方向检测，需处理权限请求与兼容性问题，并应用于游戏、全景浏览等场景。
2025-11-23 10:08:02
513
JavaScript服务端开发_Node.js高并发架构设计 Node.js高并发依赖事件驱动与非阻塞I/O，需结合cluster模块、微服务架构、异步流程控制、缓存、限流及进程管理等系统性设计保障性能与稳定。
2025-11-23 10:07:02
670
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部