Ⅰ、问题描述:
1、用JavaScript + html + CSS实现,京东网页中获取焦点方法及快递单号的查询;
2、分析:
A、在获取焦点方面:
其一、可人为的单击文本框,获得焦点;
其二、按 s/S 键来获得焦点;
B、在快递单号查询方面:
其一、要检测在查询文本框中有没有输入信息;
其二、将下面文本框中的 value 值赋给上一个(待提示的)盒子;
其三、修改上面(待提示的)盒子的文字大小等情况;
Ⅱ、实现过程如下:
1、运行软件VScode,亲测可实现;
2、运行代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.search {
position: relative;
margin: 120px;
width: 178px;
}
.con {
position: absolute;
top: -40px;
width: 171px;
padding: 5px 0;
border: 1px solid rgb(0,0,0,0.2);
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
font-size: 18px;
line-height: 20px;
color: #333;
display: none;
}
.con::after {
/* 设置伪类 (目的:在待显示提示信息的下面设置出一个倒三角形); */
content: '';
width: 0;
height: 0;
border: 8px solid #000;
position: absolute;
top: 28px;
left: 18px;
border-style: solid dashed dashed;
border-color: #fff transparent transparent;
}
</style>
</head>
<body>
<div class="search">
<div class="con">123</div> <!-- 设置:待显示的提示内容; -->
<input type="text" placeholder="请输入您的快递单号" class="jd" /> <!-- placeholder 属性指:呈现出未输入信息时的提示信息 (在输入信息后其提示信息就没了) -->
</div>
<script>
var txt = document.querySelector('.jd'); //获得 input 文本框信息(通过 DOM 操作);
onload = function() {
document.addEventListener('keyup', function(e) {
console.log('按键按下');
var e = e || window.event; //做兼容处理;
console.log(e.keyCode); //后台显示:按键的 SCII 值;
if(e.keyCode === 83) {
txt.focus(); //如果经判断键盘事件是 s 或 S 就使得 input 文本获得焦点;
}
});
}
var con = document.querySelector('.con'); //获取待提示内容的信息(通过 DOM 操作);
var jd = document.querySelector('.jd'); //获取待输入内容的信息(通过 DOM 操作);
jd.addEventListener('keyup', function() {
if (this.value === '') {
con.style.display = 'none'; //当输入框的信息为空时,将提示信息的盒子隐藏起来;
} else {
con.innerText = this.value; //当输入框中的信息非空时,将输入框中的信息赋值给提示信息的盒子内,并将该盒子显示出来;
con.style.display = 'block';
}
});
jd.addEventListener('blur', function() {
con.style.display = 'none'; //当文本框失去焦点时,那么就将显示信息的盒子隐藏起来;
});
jd.addEventListener('focus', function() {
if (this.value !== '') {
//只要文本框中非空(即:有信息),那么就将显示信息的盒子显示出来;
con.style.display = 'block';
}
});
</script>
</body>
</html>
3、结果展示:
A、在按下 s/S 时,可输入框获得焦点;
(其中的 83 就是 s/S 的 SCII 值(即:代表按下的键盘键为 s/S ));
B、也可以手动获取焦点信息;
C、在文本框中输入信息时,上面的显示框就显示出来了,且将输入的信息显示出来;
D、当文本框失去焦点时,上面显示的信息会隐藏起来,而文本框信息不消失;
E、当文本框再次获得焦点的时候,那么上面显示的信息会显示出来且和文本框中输入的信息一样;
Ⅲ、小结:
哪里有不对或不合适的地方,还请大佬们多多指点和交流!