1.编写html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>自动扩展文本框高度</title>

    <script type="text/javascript" src="../js/jquery.js"></script>

    <script type="text/javascript">

        $(function(){

            $("#words").on("input propertychange",function(e){

                var target = e.target;

                var dh = $(target).attr('defaultHeight') || 0;

                if (!dh) {

                    dh = target.clientHeight;

                    $(target).attr('defaultHeight', dh);

                }

                target.style.height = dh + 'px';

                var clientHeight = target.clientHeight;

                var scrollHeight = target.scrollHeight;

                if (clientHeight !== scrollHeight) {

                    target.style.height = scrollHeight + 10 + "px";

                }

            });

        });

    </script>

</head>

<body style="text-align: center">

    <label><h3>请输入：</h3></label><br>

    <textarea id="words" name="words" style="width: 300px;height: 30px;" default-height="20px"></textarea>

</body>

</html>

2.调试

2.1绑定函数前效果

2.2绑定函数后效果

js根据输入字符长度自动调整textarea高度的更多相关文章

  1. js判断输入字符串长度（汉字算两个字符，字母数字算一个）

    js判断输入字符串长度(汉字算两个字符,字母数字算一个) 文本输入时,由于数据库表字段长度限制会导致提交失败,因此想到了此方法验证. 废话不多说上代码: <html> <head&g ...

  2. js正则表达式验证字符长度

    原理,就是把一个汉字替换为两个字母,来实现长度验证. //js正则验证字符长度 第一种:直接输出长度 alert('1sS#符'.replace(/[^\x00-\xff]/g, 'AA').leng ...

  3. textarea中限制输入字符长度

    要在textarea中限制输入字符的长度,比如在twitter中要限制字符为140个,可实现的方法有: 1. <textarea name="A" cols="45 ...

  4. JS PHP MySQL 字符长度

    摘要: js的string.length 属性取的是字符串的实际长度 php的str_len()函数取的是字符串的字节长度,中文utf-8占3个字节,gb2312占2个字节 mysql中的varcha ...

  5. textarea中限制输入字符长度(实用版)

    textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制 ...

  6. vue 限制输入字符长度

    一.watch方法: <input v-model="textareaValue" type="textarea" placeholder="请 ...

  7. summernote 富文本编辑器限制输入字符长度

    项目中需要一个比较简单的富文本编辑器,于是选中了summernote .虽然比较轻量,但是在开发中也遇到了几个问题,在此记录一下. 1:样式和bootstrap冲突,初始化之后显示为: .note-e ...

  8. js 截取指定字符长度 为数组

    str要截取的字符 n截取个数 function jiequ(str,n) {            var strArr = [];            for (var i = 0, l = s ...

  9. Js 验证中文字符长度

    代码如下: //Oracle Varchar2 一个中文对应3个Byte,所以用3个x替换 var commentValue = commentValue.replace(/[^\x00-\xff]/ ...

  10. iOS 学习 - 7.限制 TextField 输入字符长度

    #pragma mark -- TextField代理 -(BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange: ...

随机推荐

  1. [转帖]使用 EXISTS 代替 IN 和 inner join

      在使用Exists时,如果能正确使用,有时会提高查询速度: 1,使用Exists代替inner join 2,使用Exists代替 in 1,使用Exists代替inner join例子: 在一般 ...

  2. ext4 扩容磁盘的方式方法

    ext4 扩容磁盘的方式方法 背景 前期一直处理xfs,lvm磁盘的扩容 很少处理ext4的磁盘扩容 今天发现自己竟然对这一块有盲区. 晚上回家自己学习研究了会儿, 发现知识点还挺多 所以总结一下. ...

  3. [转帖]Jmeter创建简单的HTTP（S）请求测试-3

    在上一章节中,介绍了Jmeter基本的组成组件,那么我们如何使用这些组件去完成测试呢,以下将通过创建一个简单的HTTP(S)测试进行说明,另外,除JDBC请求外,Jmeter进行测试构建的步骤大同小异 ...

  4. Core 文件的简单学习

    背景 最近公司内经常出现jvm进程宕机的情况. 宕机之后没有产生jvm的dump文件.比如xxx.hprof 但是产生了 core.$pid的文件. 曾经在aarch64架构上宕机时曾经想学习一下co ...

  5. [转贴]Kubernetes之修改NodePort对外映射端口范围

    https://www.cnblogs.com/minseo/p/12606326.html k8s默认使用NodePort对外映射端口范围是30000-50000可以通过修改kube-apiserv ...

  6. C# await和Result对比

    1.Result 上图是微软官网的截图,由图可知在使用GetXXXX的方法的时候,会阻塞调用其他线程,直到当前异步操作完成,相当于调用wait方法.但是使用异步编程应该避免使用TASK.WAIT或TA ...

  7. YiGo学习(一)YiGo介绍

    YiGo是一种开发语言,是一种面向业务人员进行管理信息系统开发的特定领域语言,属于第五代计算机语言.它可以在图形化界面上进行选择.拖拽等动作进行管理业务建模,通过建立对系统需求的描述模型由计算机自动生 ...

  8. 若依、vue三级路由缓存失败

    router.beforeEach((to, from, next) => { NProgress.start() if (getToken()) { // 三级菜单组件无法缓存问题 if (t ...

  9. GPTs prompts灵感库：创意无限，专业级创作指南，打造吸睛之作的秘诀

    GPTs prompts灵感库:创意无限,专业级创作指南,打造吸睛之作的秘诀 优质prompt展示 1.1 极简翻译 中英文转换 你是一个极简翻译工具,请在对话中遵循以下规则: - Prohibit ...

  10. Python 封装zabbix-get接口

    Zabbix 是一款强大的开源网管监控工具,该工具的客户端与服务端是分开的,我们可以直接使用自带的zabbix_get命令来实现拉取客户端上的各种数据,在本地组装参数并使用Popen开子线程执行该命令 ...