js实现多行文本框统计剩余字数功能

效果图：

代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title js统计文本框剩余字数/title style type=' text/CSS ' # area { width : 300 px；height : 300 pxresize : none }/style/head body text area自动对焦id=' area ' on key down=' sy()' maxlength=' 10 '占位符='只能输入十个字/textarea！- resize:none多行文本框不可以拖动onkeypress='sy()'键盘按住或点击时调用方法maxlength='10 '定义最大宽度占位符='只能输入十个字' 定义默认提示自（动)调焦装置定义自动获得焦点跨度你还可以输入：strong id='span' 10/strong个字/span输入类型='按钮'值='统计onclick=' fun()；div id='div'/div脚本类型='text/javascript '函数sy(){ var num=document。getelementbyid(' area ')。价值。长度；//控制台。日志(数字)；var sheng=10-num；if(sheng==0){ //变颜色为红色console.log(笙);文件。getelementbyid(' span ')。风格。color=' # ff 0000}else{ //变颜色为黑色文件。getelementbyid(' span ')。风格。color=' # 000000} document.getElementById('span ').innerHTML=sheng } fun fun(){ var txt=document。getelementbyid(' area ').价值；//这么写的意思是申请字母表三个值都为0 var a=b=c=0 for(var I=0；itxt.lengthI){ var ch=txt。charat(一)；if(ch=' a ' ch=' z '){ a；} else if(ch=' A ' ch=' Z '){ b；} else if(ch=' 0 ' ch=' 9 '){ c；} } //abc中分别统计了小写字母、大写字母、数字的个数document.getElementById('div ').innerHTML='大写字母有' b '个，小写字母有a个，数字有c个；}/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！