<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
input {
width: 300px;
height: 36px;
padding-left: 5px;
color: #ccc;
}
label {
position: absolute;
top: 82px;
left: 56px;
font-size: 12px;
color: #ccc;
cursor: text;
}
.hide {
display: none;
}
.show {
display: block;
}
</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>
//需求:京东的获取焦点。
//思路:京东的input按钮获取了插入条光标立刻删除内容。失去插入条光标显示文字。
//步骤:
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源和相关元素
var inp1 = document.getElementById("inp1");
//2.绑定事件(获取焦点事件)
inp1.onfocus = function () {
//判断,如果input里面的内容是“我是京东”,那么把值赋值为“”;
if(this.value === "我是京东"){
inp1.style.color = "#000";
inp1.value = "";
}
}
//(失去焦点事件)焦点:插入条光标
inp1.onblur = function () {
//失去焦点后判断,如果input内容为空,那么把内容赋值为我是京东。
if(this.value === ""){
//3.书写事件驱动程序
inp1.style.color = "#ccc";
inp1.value = "我是京东";
}
}
//需求:淘宝的获取焦点。
//思路:在input中输入文字,label标签隐藏,里面的文字变成空字符串,label显示。
//步骤:
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源和相关元素
var inp2 = document.getElementById("inp2");
var lab = document.getElementsByTagName("label")[0];
//2.绑定事件(输入事件,文字的输入和删除都会触动这个事件)
//获取插入条光标
// inp2.focus(); //新知识
inp2.oninput = function () {
//3.书写事件驱动程序
//判断input中的值是否为空,如果为空,那么label显示,否则隐藏。
if(this.value === ""){
lab.className = "show";
}else{
lab.className = "hide";
}
}
</script>
</body>
</html>
文本框获取焦点
最新推荐文章于 2022-01-21 11:43:23 发布