让textarea根据文本的长度自动调整它的高度
时间:2020-03-24
本文章向大家介绍让textarea根据文本的长度自动调整它的高度,主要包括让textarea根据文本的长度自动调整它的高度使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>固定textarea的宽度后,让textarea根据文本的长度自动调整它的高度。</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script> <style type="text/css"> .csstable { border-collapse: collapse; margin-top: 10px; width: 98%; } .csstable tr th { padding: 3px; _padding-bottom: 4px; text-align: right; background: #F9F9F9; } .csstable tr td, .csstable tr th { padding: 6px; border: 1px solid #d5d5d5; border-collapse: collapse; font-weight: 400; } </style> </head> <body> <br> 方法一: <fieldset style="width: 97%;"> <legend> <span>基本信息</span> </legend> <table class="csstable" style="width:76%; margin: 0cm 12% 0cm 12%;"> <tr> <td class="form-label" style="white-space: nowrap;"> <font color="red">*</font>textarea <td colspan="3" style="white-space: nowrap;"> <textarea id="xf_nrzy" name="xf_nrzy" class="textarea" style="width:100%;background:white;border: 0px;"></textarea></td> </tr> <tr> <td class="form-label" style="white-space: nowrap;"> <font color="red">*</font>textarea <td colspan="3" style="white-space: nowrap;"> <textarea id="xf_bz" name="xf_bz" class="textarea" style="width: 300px;border: 1px solid royalblue;padding: 20px;border-radius: 5px;resize: none;"></textarea></td> </tr> </table> </fieldset> <script type="text/javascript"> $('.textarea').each(function () { //border:0;border-radius:5px;background-color:rgba(241,241,241,.98);padding: 10px;resize: none; this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;width:100%;border:0;border-radius:5px;background-color:rgba(241,241,241,.98);padding: 10px;resize: none;'); }).on('input', function () { this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px'; this.style.width = '100%'; }); </script> 方法二: <script type="text/javascript"> //*2 var addHandler = window.addEventListener? function(elem,event,handler){elem.addEventListener(event,handler);}: function(elem,event,handler){elem.attachEvent("on"+event,handler);}; var $ = function(id){return document.getElementById(id);} function autoTextArea(elemid){ //½һtextareaû߶ if(!$("_textareacopy")){ var t = document.createElement("textarea"); t.id="_textareacopy"; t.style.position="absolute"; t.style.left="-9999px"; document.body.appendChild(t); } function change(){ $("_textareacopy").value= $(elemid).value; $(elemid).style.height= $("_textareacopy").scrollHeight+$("_textareacopy").style.height+"px"; } addHandler($("target"),"propertychange",change);//for IE addHandler($("target"),"input",change);// for !IE $(elemid).style.overflow="hidden";// $(elemid).style.resize="none";// } addHandler(window,"load",function(){ autoTextArea("target"); }); </script> <textarea id="target" rows="" cols=""></textarea> </body> </html>
原文地址:https://www.cnblogs.com/mysterious-killer/p/12557978.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法