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. springboot入参下划线转驼峰出参驼峰转下划线

    springboot入参出参下划线转驼峰 前言 因为历史原因前端入参和出参都为下划线,下划线对有亿点强迫症的我来说是不可接受的.因此就有了下面这篇. 本篇基于之前的一篇springboot封装统一返回 ...

  2. [转帖]如何修改Bash Shell的提示符的格式和配色

    https://zhuanlan.zhihu.com/p/348416919 我们大多数使用的shell提示符,显示用户名.主机名和当前所在目录.在本文将会介绍如何定制一个自己喜欢的Bash. 了解B ...

  3. [转帖]vdbench

    https://www.cnblogs.com/AgainstTheWind/p/9869513.html 一.vdbench安装1.安装java:java -version(vdbench的运行依赖 ...

  4. [转帖]Python安装模块（包/库）的方法

    这里写目录标题 通过pip安装 正常在线安装 pip命令补全 更改下载镜像 离线包安装 库的下载 库的安装 whl的安装 .tar.gz的安装 源码安装 本地安装报错(依赖) Pycharm中安装 手 ...

  5. [转帖]20个常用的Linux工具命令

    https://www.cnblogs.com/codelogs/p/16060113.html 简介# 网上有很多辅助开发的小工具,如base64,md5之类的,但这些小工具其实基本都可以用Linu ...

  6. js循环之map在工作中的使用

    map函数会返回一个全新的数组哈(重要 在实际中很有用) map循环空那个数组时,不会报错的. 使用map的优势 可以返回一个全新的数组 可以用于过滤 ps==>:map里面不要有判断,否者会返 ...

  7. TypeScript枚举类型

    枚举 简单理解就是将所有的情况列举出来. 枚举不是用来定义类型的哈.就是说枚举不是一种数据类型. enum xxx={ key1=value1, key2=value2, } 通过 xxx.key1的 ...

  8. RabbitMQ集成系统文章02---webForm发布 ABP VNext订阅

    一.webForm项目中发布 1.引用RabbitMQ.Client 2.在你想要发布的地方调用如下的方法 public void PublishRabbitMQ() { var data = new ...

  9. Gorm实战，轻松掌握数据库增删改查技巧！

    Gorm实战,轻松掌握数据库增删改查技巧! CRUD通常指数据库的增删改查操作,本文详细介绍了如何使用GORM实现创建.查询.更新和删除操作. 目录 Gorm实战,轻松掌握数据库增删改查技巧! 一.C ...

  10. Unity中的string gc优化

    在项目中如果有大量的字符串拼接,比如每秒执行的倒计时,协议中的日志输出,每次拼接会产生大量的gc,尤其是在ILRuntime下执行 gc alloc的次数会更加频繁. zstring 有两个字符串处理 ...