onfocus 文本框聚焦
onblur 文本框失焦(文本框先聚焦再失焦时触发)
onchange 前后两次文本框内容发生变化,中间的输入对其不造成影响,一次触发(失焦状态)
oninput 文本框输入内容发生变化,多次触发(聚焦状态)
控制文本框中还能输入多少字的最终样式
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>14练习1_控制文本框输入</title>
</head>
<body>
<!-- maxlength="5" -->
<input id="txt"></input>
<span>您还可以输入<span id="shownum">10</span>个字</span>
</body>
<script>
var oTxt = document.querySelector('#txt');
var oShowNum = document.querySelector('#shownum');
//文本框输入内容发生变化时触发
oTxt.oninput = function () {
//获取输入的字符串
var value = this.value;
//得到还能输入的字符串的长度
var len = 10 - value.length;
//如果输入的长度大于0
if (len <= 0) {
//让其显示可输入的还剩0
len = 0;
//截取所输入字符串的前10个字母
this.value = value.substring(0, 10);
}
oShowNum.innerText = len;
}
</script>
</html>