制作html快递单,京东输入快递单号.html

Document

.search {

position: relative;

width: 178px;

margin: 100px;

}

.con {

display: none;

position: absolute;

top: -40px;

width: 175px;

border: 1px solid rgba(0, 0, 0, 0.2);

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

padding: 5px 0;

font-size: 18px;

line-height: 20px;

color: #333;

}

.con::before {

content: '';

width: 0;

height: 0;

position: absolute;

top: 28px;

left: 18px;

border: 8px solid #000000;

border-style: solid dashed dashed;

border-color: #ffffff transparent transparent;

}

input {

outline: none;

}

//按下s键光标就可以聚焦到输入框中了

/* var search = document.querySelector('input');

document.addEventListener('keyup', function (e) {

// console.log(e.keyCode);

if (e.keyCode == 83) {

search.focus();

}

}) */

var con = document.querySelector('.con');

var jd_input = document.querySelector('.jd');

jd_input.addEventListener('keyup', function () {

if (this.value == '') {

con.style.display = 'none';

}

else {

con.style.display = 'block';

con.innerHTML = this.value;

}

})

//失去焦点 隐藏盒子

jd_input.addEventListener('blur', function () {

con.style.display = 'none';

})

//得到焦点 如果盒子里面的内容不为空 就显示盒子

jd_input.addEventListener('focus', function () {

if (this.value !== '') {

con.style.display = 'block';

}

})

//注意:keydown和keypress在文本框里面的特点︰他们两个事件触发的时候，文字还

//没有落入文本框中。 keypress不能识别功能键

//keyup事件触发的时候 ，文字已经落入文本框里面了 失去焦点 隐藏盒子

一键复制

编辑

Web IDE

原始数据

按行查看

历史