1.<label for=” 跳转到想要的Id“>
2.文本框获取焦点onfocus(焦点就是插入条光标)
3.失去焦点事件onblur
4.输入事件oninput(文字的输入和删除都会触发事件)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input{
width:300px;
height: 36px;
padding-left: 5px;
color: #cccccc;
}
label{
position: absolute;
top:83px;
left:65px;
font-size: 13px;
color: #cccccc;
cursor: pointer;
}
.hide{
display: none;
}
</style>
</head>
<body>
京东:<input id="inp1" type="text" value="我是京东"><br><br>
淘宝:<label for="inp2">我是淘宝</label><input id="inp2" type="text" ><br><br>
placeholder:<input type="text" placeholder="我是placeholder">
<script>
//京东获取焦点
var inp1=document.getElementById("inp1");
inp1.function () {
if(this.value==="我是京东")
{
inp1.value="";
}
}
inp1.function () {
if(this.value===""){
inp1.value="我是京东";
}
}
//淘宝获取焦点
var inp2=document.getElementById("inp2");
var lab=document.getElementsByTagName("label")[0];
inp2.function () {
if(this.value===""){
lab.className="";
}else {
lab.className="hide";
}
}
</script>
</body>
</html>
2.文本框获取焦点事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input{
display: block;
margin: 5px ;
}
</style>
</head>
<body>
<ul>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<button>设置</button>
</ul>
<script>
//点击设置按钮,让所有的input标签获取焦点后高亮显示
/* var btn=document.getElementsByTagName("button");*/
var inpArr=document.getElementsByTagName("input");
var button=inpArr[inpArr.length-1].nextElementSibling||inpArr[inpArr.length-1].nextSibling;
button.function () {
for(var i=0;i<inpArr.length;i++){
inpArr[i].function () {
this.style.border="2px solid #ccc";
this.style.backgroundColor="pink"
}
inpArr[i].function () {
this.style.border="";
this.style.backgroundColor=""
}
}
}
</script>
</body>
</html>