js实现多行文本框统计剩余字数功能
更新时间：2017年03月28日 09:00:02 作者：kb码农
本文主要介绍了js实现多行文本框统计剩余字数功能的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
效果图：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js统计文本框剩余字数</title>
<style type="text/css">
#area{
width: 300px;
height: 300px;
resize:none;
}
</style>
</head>
<body>
<textarea autofocus id="area" onkeydown="sy()" maxlength="10" placeholder="只能输入十个字"></textarea>
<!--
resize:none 多行文本框不可以拖动
onkeypress="sy()"键盘按住或点击时调用方法
maxlength="10"定义最大宽度
placeholder="只能输入十个字" 定义默认提示
autofocus 定义自动获得焦点
-->
<span>你还可以输入:<strong id="span" >10</strong>个字</span>
<input type="button" value="统计" onclick="fun();">
<div id="div"></div>
<script type="text/javascript">
function sy() {
var num=document.getElementById("area").value.length;
//console.log(num);
var sheng=10-num;
if(sheng==0){
//变颜色为红色
console.log(sheng);
document.getElementById("span").style.color="#ff0000";
}else{
//变颜色为黑色
document.getElementById("span").style.color="#000000";
}
document.getElementById("span").innerHTML=sheng;
}
function fun(){
var txt=document.getElementById("area").value;
//这么写的意思是申请abc三个值都为0
var a=b=c=0;
for(var i=0;i<txt.length;i++){
var ch=txt.charAt(i);
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+"个";
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了JavaScript贪吃蛇的实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟) 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
用RadioButten或CheckBox实现div的显示与隐藏
用RadioButten（或CheckBox）实现div的显示与隐藏，当选择“女”时，显示“美女、才女”；当选择“男”时隐藏，具体实现如下，感兴趣的朋友可以参考下2013-09-09
本文主要介绍了全面讲解JavaScript原型与原型链，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了详解如何探测小程序返回到webview页面，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
下面小编就为大家带来一篇js控制台输出的方法(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
本文给大家分享2个javascript实现简单的进度条，一个是个人制作一个是网友实现的，都很不错，这里推荐给大家。2015-07-07
这篇文章主要介绍了CKeditor4 字体颜色功能配置方法,结合图文与实例的形式分析了CKeditor4 添加字体颜色扩展功能的相关实现步骤与操作技巧,需要的朋友可以参考下2019-06-06
本文主要介绍了js实现带农历和八字等信息的日历特效,小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-05-05
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
写了个html5播放视频的video控件，只支持mp4和3gp(android和ios默认支持的格式就写了这个) ,需要的朋友可以参考下2014-05-05
最新评论