Ⅰ、问题描述：
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、当文本框再次获得焦点的时候，那么上面显示的信息会显示出来且和文本框中输入的信息一样；
Ⅲ、小结：
哪里有不对或不合适的地方，还请大佬们多多指点和交流！