<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="format-detection" content="telephone=no">
<title>test</title>
<style type="text/css">
body{text-align: center;}
.div1{
max-width: 1000px;
margin: 50px auto;
padding: 20px 0;
background-color: #efa;
}
</style>
</head>
<body>
<div class="div1">
数字个数是：<span class="js-spn">0</span>个<br/>
英文个数是：<span class="js-spn">0</span>个<br/>
汉子个数是：<span class="js-spn">0</span>个</div>
<input class="js-inp-area" type="text" placeholder="请输入字符">
<script type="text/javascript">
window.onload=function(){
// var form=document.forms[0];
var aSpn=document.querySelectorAll(".js-spn");
var oInp=document.querySelector(".js-inp-area");
oInp.onblur=function(){
var txt=this.value;
if(txt!==""){
var re1=/\d/g;
var re2=/[a-zA-Z]/g;
var re3=/[\u4e00-\u9fa5]/g;
var len1=0,len2=0,len3=0;
if(txt.match(re1)!=null){
len1=(txt.match(re1)).length;
aSpn[0].innerHTML=len1;
}
if(txt.match(re2)!=null){
len2=(txt.match(re2)).length;
aSpn[1].innerHTML=len2;
}
if(txt.match(re3)!=null){
len3=(txt.match(re3)).length;
aSpn[2].innerHTML=len3;
}
}
}
}
</script>
</body>
</html>
input框失去焦点开始统计，具体可以按你需求再改。