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. [转帖]Nginx 保留 Client 真实 IP

    https://lqingcloud.cn/post/nginx-01/#:~:text=%E5%9C%A8%20Nginx%20%E4%B8%AD%E5%8F%AF%E4%BB%A5%E9%80%9 ...

  2. 在线安装gfortran的方法-CentOS8 or 阿里龙蜥

    在线安装gfortran的方法-CentOS8 or 阿里龙蜥 背景 在阿里云上面进行了 speccpu2006的测试验证 但是发现总是很多包安装不过去 原因是阿里最小化安装的龙蜥系统. 缺少很多编译 ...

  3. 解决node与npm版本不一致，出现npm WARN npm npm does not support Node.js v15.14.0

    出现node与npm版本不一致 今天我升级了node之后,出现的了如下信息 npm WARN npm You should probably upgrade to a newer version of ...

  4. elementUI（datepicker）限制日日期的选择

    指定起始日期,后选的将会受到先选的限制 参考地址 https://www.jianshu.com/p/c59c8ef6c500 实现方法不难,利用了 change 事件,动态改变 picker-opt ...

  5. DotLiquid(.net模版引擎)

    可用生成C#代码,在KSFramework中有使用:https://github.com/mr-kelly/KSFramework 主页:http://dotliquidmarkup.org/ 文档: ...

  6. 文字溢出hover展示

    我这个后端返回的是html结构,不然不用加v-html,需要依赖element Ui 的文字提示 <el-tooltip placement="top"> <p ...

  7. 【4】配置和运行Opencv常见的一些问题总结，以及bug解决。

    相关文章: [1]windows下安装OpenCV(4.3)+VS2017安装+opencv_contrib4.3.0配置 [2]Visual Studio 2017同时配置OpenCV2.4 以及O ...

  8. 多智能体强化学习算法【三】【QMIX、MADDPG、MAPPO】

    相关文章: 常见多智能体强化学习仿真环境介绍[一]{推荐收藏,真的牛} 多智能体强化学习算法[一][MAPPO.MADDPG.QMIX] 多智能体强化学习算法[二][MADDPG.QMIX.MAPPO ...

  9. 7.2 通过API创建新进程

    创建新的进程是Windows程序开发的重要部分,它可以用于实现许多功能,例如进程间通信.并行处理等.其中,常用的三种创建进程的方式分别是WinExec().ShellExecute()和CreateP ...

  10. MySQL 之多表连查(精简笔记)

    MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品.MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL是最好的 RD ...