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. [转帖]HAProxy 在 TiDB 中的最佳实践

    https://docs.pingcap.com/zh/tidb/stable/haproxy-best-practices 本文介绍 HAProxy 在 TiDB 中的最佳配置和使用方法.HAPro ...

  2. [转帖]谈谈ClickHouse性能情况以及相关优化

    https://zhuanlan.zhihu.com/p/349105024 ClickHouse性能情况 主要分为4个方面 1.单个查询吞吐量 场景一: 如果数据被放置在page cache中,则一 ...

  3. [转帖]grafana配置邮件发送

    grafana的邮件配置文件是/etc/grafana/grafana.ini,新建grafana.ini文件,内容如下. chown 472:472 grafana.ini ############ ...

  4. 关于sar的学习

    关于sar的学习 背景 公司一套基于某冷门Python架构的系统前几天出现异常卡顿. 当时安装的时候必须使用ubuntu系统. 所以当时默认安装的ubuntu1804, 本来想尝试使用一下sar查看卡 ...

  5. [转帖]Linux小知识：sudo su和su的区别

    https://www.cnblogs.com/jiading/p/11717388.html su是申请切换root用户,需要申请root用户密码.有些Linux发行版,例如ubuntu,默认没有设 ...

  6. Flutter开发桌面应用的一些探索

    引言 在移动应用开发领域,Flutter已经赢得了广泛的认可和采用,成为了跨平台移动应用开发的瑞士军刀.然而,Flutter的魅力并不仅限于移动平台,它还可以用于开发桌面应用程序,为开发人员提供了一种 ...

  7. 佳能F-789SGA升级与超频——互联网Tips存档

    佳能F-789SGA简介 佳能F-789SGA是一款性价比极高的科学函数计算器,功能与卡西欧fx-991ES近似,稍强于991ES,弱于991CNX. 来自電卓院亜紀良的评价 来自杨高峰的对比总结 来 ...

  8. Fabric升级示例

    Fabric v1.4.x升级至v2.2.0 本文首发于这里,转载请注明出处. 以fabric-samples v1.4.8为例,将v1.4.8升级至v2.2.0.注意,所有节点以滚动的方式进行升级, ...

  9. 通过Unity导出的Android Studio和Google安卓原生工程的结构图对比

    使用Unity导出Android Studio工程前建议查看我之前的文章<Unity2019及Unity2020打包android的环境配置>,替换或修改Unity安装目录下的basePr ...

  10. 开启想象翅膀：轻松实现文本生成模型的创作应用，支持LLaMA、ChatGLM、UDA、GPT2等模型，开箱即用

    开启想象翅膀:轻松实现文本生成模型的创作应用,支持LLaMA.ChatGLM.UDA.GPT2等模型,开箱即用 1.介绍 TextGen实现了多种文本生成模型,包括:LLaMA.ChatGLM.UDA ...