<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#show span {background-color: bluecolor: #fffmargin:3px}
#in{background-color: transparentcolor: transparent}
#show,#in{
width:500px
height:30px
font-size: 20px
line-height: 30px
position: absolute
top:0px
}
</style>
</head>
<body>
<div id="show"></div>
<input id="in" type="text">
<script>
var show = document.getElementById('show')
var input = document.getElementById('in')
show.onfocus = function(){
}
document.onkeyup = function(){
show.innerHTML = function(){
var a = input.value.split('')
var b = a.pop()
a = '<span>' + a.join('</span><span>')+'</span>' + b
return a
}()
}
</script>
</body>
</html>
<script>
function change() {
var divDisp = document.getElementById("search").style.display
if (divDisp == "block") {
document.getElementById("search").style.display = "none"
} else {
document.getElementById("search").style.display = "block"
}
}
</script>
<body>
<input id="btnChange" type="button" onclick="change()" value="点我改变"/>
<div id="search" style="display:none">
<input id="searchText" type="text" />
</div>
</body>
/* 问题不够明确 */<input class="ipt_search" type="search" placeholder="请输入搜索内容"/>
<script>
/* 搜索input */
var searchIpt = document.getElementsByClassName('ipt_search')[0]
/* 搜索内容 */
var searchValue = searchIpt.value
</script>
