<html>
<div class="con"></div>
<input type="text" placeholder="请输入内容">
</html>
<style>
.con {
display: none;
background-color: #fff;
height: 50px;
line-height: 50px;
font-size: 30px;
border: 1px solid #333;
}
</style>
<script>
// 获取元素
var con = document.querySelector('.con')
var input = document.querySelector('input')
//给元素添加事件 keyup键盘弹起
input.addEventListener('keyup', function (e) {
if (input.value == '') {
con.style.display = 'none'
} else {
con.style.display = 'block'
con.innerHTML = input.value
}
})
// 失去焦点
input.addEventListener('blur', function () {
con.style.display = 'none'
})
// 获得焦点
input.addEventListener('focus', function () {
if (this.value !== '') {
con.style.display = 'block'
}
})
</script>效果图：
