在window.onload中给input元素绑定事件,根据输入添加，删除，修改样式class
绑定事件时注意，有没有
on。
attachEvent参数1是带on的;addEventListener是不带on的。还要注意大小写，因为是JS是区分大小写的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base target="_blank" href="http://www.56191.com/" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>在window.onload中给input元素绑定事件,根据输入添加，删除，修改样式class</title>
<style>
.b {
border: 1px solid #ffa500;
background-color: orangered;
color: #fff;
}
.c {
border: 1px solid #4b18c2;
background-color: rgb(95, 21, 216);
color: #fff;
}
input {
border: 1px solid #ffa500;
}
</style>
</head>
<body>
<h1>在下边几个文件框里输入试试看</h1>
去掉背景色
<input id="demo1" type="text" maxlength="12" class="b"><br>
修改背景色
<input id="demo2" type="text" maxlength="12" class="b"><br>
添加背景色
<input id="demo3" type="text" maxlength="12"><br>
<script>
window.onload = windowonload;
function windowonload() {
//在这里绑定事件
if ("\v" == "v") {//true为IE浏览器，感兴趣的同学可以去搜下，据说是现有最流行的判断浏览器的方法
document.getElementById("demo1").attachEvent("onporpertychange", myFunction1);
document.getElementById("demo2").attachEvent("onporpertychange", myFunction2);
document.getElementById("demo3").attachEvent("onporpertychange", myFunction3);
} else {
document.getElementById("demo1").addEventListener("input", myFunction1);
document.getElementById("demo2").addEventListener("input", myFunction2);
document.getElementById("demo3").addEventListener("input", myFunction3);
}
}
function myFunction1() {
removeclass("demo1", "b");
}
function myFunction2() {
modifyclass("demo2", "b", "c");
}
function myFunction3() {
addclass("demo3", "b");
}
function addclass(objid, classname) {
let classAtr = document.getElementById(objid).getAttribute("class");
if (classAtr != null) {
var newClass = classAtr.concat(" " + classname); //注意这里有空格哟
} else {
var newClass = classname;
}
document.getElementById(objid).setAttribute("class", newClass);
}
function modifyclass(objid, oldclassname, newclassname) {
let classAtr = document.getElementById(objid).getAttribute("class");
let newClass = classAtr.replace(oldclassname, newclassname);
document.getElementById(objid).setAttribute("class", newClass);
}
function removeclass(objid, classname) {
let classAtr = document.getElementById(objid).getAttribute("class");
let newClass = classAtr.replace(classname, "");
document.getElementById(objid).setAttribute("class", newClass);
}
</script>
</body>
</html>
