html 实时计算字数,JavaScript 实现textarea限制输入字数, 输入框字数实时统计更新,输入框实时字数计算移动端bug解决...
textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到。与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制以达到预设的需求。
通常的做法就是使用#脚本语言来实现对textarea文本域的字数输入限制,简单而实用。假设我们有一个id为 txta1 的textarea文本区,我们可以通过以下代码限制它的键盘输入字数为10个字(汉字或其他小角字符):
<script language="#" type="text/ecmascript">
window.οnlοad= function()
{
document.getElementById(‘txta1‘).onkeydown = function()
{if(this.value.length >= 10)
event.returnValue= false;
}
}
</script>
JavaScript输入框字数实时统计更新
如上图所示的输入框的字体计算在各大网站上是在熟悉不过的了,当然在pc端制作起来也是相当简单,只要捕捉键盘事件对输入框中的字数进行获取,再用限制字数减去获取的字数便可以实时计算出“还可以输入多少字”。但是在移动端这个方法还像是不可行的,第一,pc端可以使用keyup或者keydown进行事件捕捉,当然移动端也可以使用他们,但是在移动端拼音输入时就会出现下图的情况:
当我拼音输入完毕要选择我的目标汉字时,键盘上方的汉字“我是你大哥”就不属于键盘的一部分了,所以这个时候点击”我是你大哥“进行选择是就不会触发keyup或者keydown事件,那么下方的“还可以输入**”字“就会出现错误,也就会出现bug。下面我就把pc端的字数计算与移动端的字数计算全都写出来:
1.pc端方法:
$("textarea").on("keyup",function(){var textLength = $("textarea").val().length;var numLength = 500-textLength;
$(".takeTip span").text(numLength);
})
已上是最常用的一种方法,这种方法在pc端完美运行,很简单。
2.移动端方法:
setInterval(function(){var textLength = $("textarea").val().length;var numLength = 500-textLength;
$(".takeTip span").text(numLength);
},100)
因为移动端方法会出现keyup无法触发的问题,所以就只能不用与键盘相关的事件来进行捕捉,使用setInterval函数来进行实时的监控,在移动端完美运行。
下面是vue版:
watchWordsCount:function(){
setInterval(function(){
var textLength = $("textarea").val().length;
var numLength = 20-textLength;
if(numLength<=0){
$(".textarea").val($(".textarea").val().substr(0, 20));
$(".nowcount").html(‘评论内容超出最大限制‘+(20));
}else{
$(".nowcount").text(20-numLength);
}
},100)
}
mounted:function(){this.watchWordsCount();
},
0/20
html 实时计算字数,JavaScript 实现textarea限制输入字数, 输入框字数实时统计更新,输入框实时字数计算移动端bug解决...相关推荐
- JavaScript 实现textarea限制输入字数, 输入框字数实时统计更新,输入框实时字数计算移动端bug解决...
textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制 ...
- texearea 限制字数_实现textarea限制输入字数
实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个) textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框t ...
- texearea 限制字数_js实现textarea限制输入字数
实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个) textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框t ...
- c语言计算个人所得税作业,写一个程序,输入任何一个公民的月收入和五险一金,能够计算他应缴纳的个人所得税.用C语言...
问题描述: 写一个程序,输入任何一个公民的月收入和五险一金,能够计算他应缴纳的个人所得税.用C语言 3.我国的个人所得税实行累进税率,计算办法是:用全月应纳税所得额分为几个级别,分别乘以累进税率,几个 ...
- 输入框实时字数计算移动端bug解决
作者:旺仔 如上图所示的输入框的字体计算在各大网站上是在熟悉不过的了,当然在pc端制作起来也是相当简单,只要捕捉键盘事件对输入框中的字数进行获取,再用限制字数减去获取的字数便可以实时计算出" ...
- texearea 限制字数_限制textarea的输入字数
今天接到任务的第一个需求是限制字数,查看了一下之前人留下来的代码,使用的是textarea,于是就想当然的用了maxlength,结果发现无用.查阅得知,原来textarea对于maxlength的支 ...
- C语言,实现从键盘输入20个整数,统计非负数个数,并计算非负数之和
#include<stdio.h> int main(){ int a[20]; int c=0,sum=0,i; for(i=0;i<20;i++) { scanf("% ...
- textarea输入框实时 统计字数(可统计中文,英文字数)
textarea输入框实时 统计字数(可统计中文,英文字数) 效果图如下所示: html部分: <textarea name="des" id="" ro ...
- 实现textarea限制输入字数
2019独角兽企业重金招聘Python工程师标准>>> textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框text控件不同, ...
最新文章
- 路由器、三层交换机通过OSPF实现互访 (OSPF初学案例)
- MyCollection 程序 F&Q
- 常熟理工电气院永不言败
- 【转】datagridview的checkbox列,当修改checkbox状态时实时获得其准确状态值
- kafka监控工具kafkaOffsetMoniter的使用
- 前端学习(1424):ajax低版本兼容问题
- LeetCode 660. 移除 9(9进制)
- java 父子级json组装不用递归_2020面试阿里Java研发岗题库总结,想虐面试官不能错过的面试宝典...
- dumpstack_Java Thread类的静态void dumpStack()方法(带示例)
- 学VBSCRIPT从学起
- sql server 2005 修改动态端口,连接字符串为:需要改成:IP地址+逗号+端口号才行...
- 日志存储 elasticsearch vs clickhouse
- C# 自定义Json解析工具
- 数字图像处理期末复习总结
- vagrant入门_在Vagrant上使用PHP入门的5种简单方法
- 【OPENCV】运行opencv时找不到Qt库
- Git - 时光机穿梭
- 苹果/Mac电脑软件卸载不了怎么办?
- Git实战技巧-比较不同分支之间的差异和代码的改动
- error 1366