Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Javascript 文本框textarea高度随内容自适应增长收缩_表单特效

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

WBOY
Freigeben： 2016-05-16 18:04:55
Original
1442 Leute haben es durchsucht

直接上代码：
方案一：


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

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






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







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


其他方案：

  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
Verwandte Etiketten：
textarea 自适应 高度
Quelle：php.cn
Vorheriger Artikel：遨游，飞飞，IE，空中网 浏览器无提示关闭方法_javascript技巧 Nächster Artikel：一款Jquery 分页插件的改造方法（服务器端分页）_jquery
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Gibt es eine Möglichkeit, dafür zu sorgen, dass in einem Textbereich keine CSS-Transformationen angezeigt werden, wenn die Größe geändert wird? Wenn ich den Hintergrundübergang von <textarea> auf Hover setzen möchte, gelingt die...
Aus 2024-04-03 17:02:11
0
1
245
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage