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. [转帖]从小白到精通：揭秘perf工具的全部功能与操作技巧

    https://zhuanlan.zhihu.com/p/664396453 ​ 目录 收起 一.引言 二.理解perf工具的基本概念 三.安装与配置perf工具 3.1.不同操作系统的perf工具安 ...

  2. [转帖]minio性能测试

    https://zhangzhuo.ltd/articles/2021/09/08/1631106274550.html 压测参数说明 压测数据量为:2个backet,每个backet为10000对象 ...

  3. [转帖]wiki Rust

    Rust[编辑] 维基百科,自由的百科全书       跳到导航跳到搜索   此条目介绍的是由Mozilla主导开发的编程语言.关于"rust"在英文中的本意,请见"铁锈 ...

  4. [转帖]Prometheus 都可以采集那些指标？-- 常用 Exporter 合集

    Prometheus 可以通过各种 Exporter 来获取很多指标,并且只要符合 Prometheus 规范的都可以获取到,本文汇总一些常用的采集器到这里.  Prometheus Exporter ...

  5. [转帖]公钥基础设施(PKI,Public Key Infrastructure)闲谈

    https://zhuanlan.zhihu.com/p/384436119 背景 在现实空间中,人类的活动范围和接触人的范围有限,人和人最初的信任是建立在小团体或部落内部.随着全球化进展,人类的活动 ...

  6. [转帖]浅谈Redis大Key与热Key

    https://www.cnblogs.com/jelly12345/p/16424080.html 如何定义大 Key 和 热 Key 如何定义大 Key 如何定义热 Key 大 Key 和 热 K ...

  7. 【0基础学爬虫】爬虫基础之自动化工具 Pyppeteer 的使用

    大数据时代,各行各业对数据采集的需求日益增多,网络爬虫的运用也更为广泛,越来越多的人开始学习网络爬虫这项技术,K哥爬虫此前已经推出不少爬虫进阶.逆向相关文章,为实现从易到难全方位覆盖,特设[0基础学爬 ...

  8. Docker 完整指南

    欢迎来到 Docker 的完整指南!在这个教程中,我们将深入研究 Docker 的各种特性,从基础的容器操作到高级的网络配置和数据管理.让我们一步步地探索 Docker 的丰富功能. 1. 安装 Do ...

  9. Mysql 为现有数据生成Guid

    GUID 全局唯一标识符(GUID,Globally Unique Identifier)是一种由算法生成的二进制长度为128位的数字标识符.GUID主要用于在拥有多个节点.多台计算机的网络或系统中. ...

  10. NLP国内外大模型汇总列表[文心一言、智谱、百川、星火、通义千问、盘古等等]

    NLP国内外大模型汇总列表[文心一言.智谱.百川.星火.通义千问.盘古等等] 中国大模型列表大全,全面收集有明确来源的大模型情况,包括机构.来源信息和分类等,随时更新. Awesome family ...