JavaScript输入框放大显示效果

要求:

用户在输入框输入内容时,上面的大号字体盒子con显示(这里面的字号更大)

实现思路:

  1. 表单检测用户输入:给表单添加键盘事件
  2. 同时把快递单号里面的值value获取过来赋值给con盒子innerText做为内容
  3. 如果快递单号里面内容为空,则隐藏大号字体盒子con盒子

代码实现:

HTML:

<div class="search">
    <div class="con">123</div>
    <input type="text" placeholder="请输入您的快递单号" class="jd">
</div>

CSS:

* {
    margin: 0;
    padding: 0;
}

.search {
    position: relative;
    width: 178px;
    margin: 100px;
}

.con {
    display: none;
    position: absolute;
    top: -40px;
    width: 171px;
    border: 1px solid rgba(0, 0, 0, .2);
    box-shadow: 0 2px 4px rgba(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 #000;
    border-style: solid dashed dashed;
    border-color: #fff transparent transparent;
}

JS:

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.innerText = this.value;
    }
});
// 当失去焦点,就隐藏这个con盒子
jd_input.addEventListener('blur', function() {
    con.style.display = 'none';
});
// 当获得焦点,就显示这个con盒子
jd_input.addEventListener('focus', function() {
    if (this.value !== '') {
        con.style.display = 'block';
    }
});
posted @ 2020-10-11 08:06  火星飞鸟  阅读(569)  评论(0编辑  收藏  举报