yueloveme的博客通过本文主要向大家介绍了js键盘事件,js键盘按下事件,js键盘事件触发,js键盘事件大全,js键盘监听等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
<!DOCTYPE html>
<html>
<head>
<title>ZzhJs2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
var a = document.getElementById("area");
//count方法 作用 检测id="area"中字符长度 如果大于100显示红色 否则的显示绿色
function count() {
if (a.value.length > 100) {
a.value = a.value.substring(0, 100);
}
var num = a.value.length;
var sheng = 100 - num;
var s = document.getElementById("span");
if (sheng == 0) {
s.style.color = "#ff0000";
} else {
s.style.color = "#00ff00";
}
s.innerHTML = "还剩(" + sheng + ")个字";
}
//fun方法统计id=area区域总大写 小写 数字分别的个数
function fun() {
var str = a.value;
var num1 = num2 = num3 = 0;
for ( var i = 0; i < str.length; i++) {
var ch = str.charAt(i)
if (ch >= 'A' && ch <= 'Z') {
num1++;
} else if (ch >= 'a' && ch <= 'z') {
num2++;
} else if (ch >= '0' && ch <= '9') {
num3++;
}
}
document.getElementById("div").innerHTML = "大写字母:" + num1 + "小写字母:"
+ num2 + "数字:" + num3;
}
</script>
</head>
<body>
<!-- 当键盘中某一个键抬起的时候就运行count方法
键盘按下和抬起分别是onkeydown和onkeyup -->
<textarea rows="5" cols="20" id="area" onkeydown="count();"></textarea>
<br>
<span id="span">还剩(100)个字</span>
<input type="button" value="统计" onclick="fun();">
<div id="div"></div>
</body>
</html>