js根据输入字符长度自动调整textarea高度
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高度的更多相关文章
- js判断输入字符串长度(汉字算两个字符,字母数字算一个)
js判断输入字符串长度(汉字算两个字符,字母数字算一个) 文本输入时,由于数据库表字段长度限制会导致提交失败,因此想到了此方法验证. 废话不多说上代码: <html> <head&g ...
- js正则表达式验证字符长度
原理,就是把一个汉字替换为两个字母,来实现长度验证. //js正则验证字符长度 第一种:直接输出长度 alert('1sS#符'.replace(/[^\x00-\xff]/g, 'AA').leng ...
- textarea中限制输入字符长度
要在textarea中限制输入字符的长度,比如在twitter中要限制字符为140个,可实现的方法有: 1. <textarea name="A" cols="45 ...
- JS PHP MySQL 字符长度
摘要: js的string.length 属性取的是字符串的实际长度 php的str_len()函数取的是字符串的字节长度,中文utf-8占3个字节,gb2312占2个字节 mysql中的varcha ...
- textarea中限制输入字符长度(实用版)
textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制 ...
- vue 限制输入字符长度
一.watch方法: <input v-model="textareaValue" type="textarea" placeholder="请 ...
- summernote 富文本编辑器限制输入字符长度
项目中需要一个比较简单的富文本编辑器,于是选中了summernote .虽然比较轻量,但是在开发中也遇到了几个问题,在此记录一下. 1:样式和bootstrap冲突,初始化之后显示为: .note-e ...
- js 截取指定字符长度 为数组
str要截取的字符 n截取个数 function jiequ(str,n) { var strArr = []; for (var i = 0, l = s ...
- Js 验证中文字符长度
代码如下: //Oracle Varchar2 一个中文对应3个Byte,所以用3个x替换 var commentValue = commentValue.replace(/[^\x00-\xff]/ ...
- iOS 学习 - 7.限制 TextField 输入字符长度
#pragma mark -- TextField代理 -(BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange: ...
随机推荐
- [转帖]Zookeeper集群搭建(3个节点为例)
Zookeeper集群搭建 1.说明 本文用的linux版本:centos6,准备3台centos6虚拟机,给他们安装zookeeper,每一台的安装过程相同,你也可以安装一台,然后克隆出另外两台.主 ...
- [转帖]Jmeter接口测试:参数化
Jmeter接口请求中的参数经常需要通过参数进行赋值 引用形式:${} 变量时:${变量名} 函数时,${_函数名(参数1,参数2,参数3)} 值中"${n}"中,n为变量名:&q ...
- [转帖]Nginx-https证书认证详解
https://developer.aliyun.com/article/885650?spm=a2c6h.24874632.expert-profile.306.7c46cfe9h5DxWK 简介: ...
- windwos10-11打开任意文件弹出警告
如下打开exe或者视频.图片都弹出警告 解决方案输入快捷键win+s换出搜索框 输入Internet 选项 进入安全选项点击自定义级别 找到,加载应用程序和不安全文件 勾选启用(不安全) 然后确定-在 ...
- 站点用css一键变灰色
默哀站点变灰色效果看本站即可 css代码如下 <style>html{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%); ...
- pandas读取txt---按行输入按行输出
1.pandas读取txt---按行输入按行输出 import pandas as pd # 我们的需求是 取出所有的姓名 # test1的内容 ''' id name score 1 张三 100 ...
- C/C++ 进程线程操作技术
手动创建单进程: 下面通过一个实例来分别演示进程的创建函数. #include <windows.h> #include <stdio.h> BOOL WinExec(char ...
- 分布式缓存-Redis集群
一.单点Redis弊端 1.数据丢失问题:Redis是内存存储,服务器重启可能会丢失数据 2.并发能力问题:单节点Redis并发能力虽然不错,但也无法满足如618这样的高并发场景 3.故障恢复问题:如 ...
- php批量更新多条数据
/** * @param $table 表名 * @param array $multipleData 拼接的批量更新的数组格式: * $students = [['id' => 1, 'cit ...
- 使用DoraCloud构建远程办公桌面云
公司总部在上海.员工分布在各地.部分员工需要远程办公.为了实现远程办公,有几种备选方案. 方案1.在员工的PC上安装向日葵.ToDesk之类的远程工具. 方案2.公司总部提供VPN,员工通过VPN拨号 ...