当前位置:网站首页>div模拟textarea文本框,输入文字高度自适应,且实现字数统计和限制
div模拟textarea文本框,输入文字高度自适应,且实现字数统计和限制
2022-08-09 09:11:00 【云胡不喜?】
需求:
文本框可根据输入内容高度自适应,不带滚动条,高度可变的那种,我搜索了很多,发现textarea无法实现我的需求,scrollHeigh这个无法获取实际内容的高度(我用的是那种简单的,可能我写的哪里不对吧;那种代码很多的,我又不想那么去做,麻烦。。。),所以只能div模拟textarea文本框了。
使用div模拟textarea文本框,输入文字高度自适应,且实现字数统计和限制,输入字数超出65时,统计数字会变红,作为提示,当div失去焦点时,字数会剪切为最大限制字数65。
// 可实现div模仿文本框进行编辑
contenteditable="true"
其实,本来实时限制用户输入字数,也就是当用户输入字数达到65时,不允许再次输入,体验会更好。但是当我这样做时,div里的光标会跑到div的最前面,再次输入时导致后面字被剪切掉,我无法获取和定位光标,所以只能设置当blur,失去焦点时,再剪切字数(当然,光标的获取和定位应该可以实现,有需求的小伙伴,可以自己试试 ^_^)。
效果图:
HTML:
<div class="add-doss-retpl">
<div>意向备注
<span class="c-gy">
<span :class="addTotal > 65 ? 'hx-red' : ''" > {
{addTotal}}</span>
/65
</span>
</div>
<div class="add-doss-foremark" id="add-doss-foremark" @input="addDossInput($event)"
@blur="addDossBlur($event)" contenteditable="true"></div>
</div>
CSS:
.add-doss-retpl{
background-color: #fff;
padding: 10px;
.add-doss-foremark{
width:100%;
margin: 10px 0;
border:#e1e1e1 solid 1px;
padding: 10px 8px;
}
.hx-red{
color:red;
}
}
VUE.js:
<script>
export default {
data:function(){
return {
addInremark:'', // 意向备注
addTotal:0, // 统计输入框里的字数
}
},
activated:function () {
this.addInremark = (JSON.parse(sessionStorage.getItem('customerComments')) || JSON.parse(sessionStorage.getItem('customerComments'))=='') ? JSON.parse(sessionStorage.getItem('customerComments')) : (this.$route.query.customerComments?this.$route.query.customerComments:'');
// 输入框赋初始值
document.getElementById('add-doss-foremark').innerHTML = this.addInremark;
this.getAddTotal(); // 字数统计
},
watch:{
// 监听意向备注(统计字数&&存储)
'addInremark'(){
this.getAddTotal();
sessionStorage.setItem('customerComments', JSON.stringify(this.addInremark));
},
},
beforeRouteEnter(to, from, next){
if (from.name == "dossCustomer" || from.name == "clientDetail" ) {
sessionStorage.removeItem('customerComments');
}
next();
},
methods:{
// 监听意向备注输入
addDossInput(e){this.addInremark = e.target.innerHTML;},
// 监听意向备注失去焦点
addDossBlur(e){
if(e.target.innerHTML.length > 65){
this.addInremark = e.target.innerHTML.slice(0,65);
let addRe = document.getElementById('add-doss-foremark');
addRe.innerHTML = this.addInremark;
}else {
this.addInremark = e.target.innerHTML;
}
},
// 字数统计
getAddTotal(){
this.addTotal = this.addInremark.length;
}
}
}
</script>
边栏推荐
猜你喜欢
随机推荐
PoPW token distribution mechanism may ignite the next bull market
gin中模型中增删改查+搜索分页
jfinal加载配置文件原理
小程序/app触底加载更多数据
历史遗留问题
MySQL索引
按字节方式和字符方式读取文件_加载配置文件
ARMv8/ARMv9视频课程-Trustzone/TEE/安全视频课程
makefile 遗漏分割符 您的意思是用TAB代替8个空格?
基于 JSch 实现服务的自定义监控解决方案
When and How to use MALLOC
epoll LT和ET 问题总结
on duplicate key update
centos7 mysql异常ERROR 2002 (HY000)分析解决
MySQL transaction isolation
Ovie map computer terminal and mobile terminal can not be used, is there any alternative map tool
基于蓝牙定位功能开发的医院智能导航系统
【培训课程专用】Secureboot
这下你知道为什么程序员要和产品干架了吧?
JMeter参数化4种实现方式