Question

请问用html+css+js怎么实现在搜索框中加一个清除按钮？

请问用html+css+js怎么实现在搜索框中加一个清除按钮？如图！

Answer 1

* {
margin: 0;
padding: 0;
}
input {
float: left;
height: 20px;
border: 1px solid #ccc;
}
.texter {
border-right: none;
}
.clearer {
float: left;
width: 20px;
border: none;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: #fff;
}

<input type="text" class="texter" id="texter">
<input type="submit" class="clearer" onClick="document.getElementById('texter').value = '';" value="x">

 清除按钮怎么会用到onchange事件的？

追问

在ie9中没有效果，另外这个按钮是在输入文字时才会出现，没有文字时就消失

追答

呃

首先我自己测试了一下，ie7-9是有效果的。。。

其次修改了一下满足了你新加上的要求

* {
margin: 0;
padding: 0;
}
input {
float: left;
height: 20px;
border: 1px solid #ccc;
}
.texter {
border: none;
}
.clearer {
float: left;
width: 20px;
border: none;
display: none;
background: #fff;
}
div {
width: 171px;
height: 22px;
border: 1px solid #ccc;
}

<div>
<input type="text" class="texter" id="texter" onKeyUp="showBtn();">
<input type="submit" class="clearer" id="clearBtn" onClick="clearText();" value="x">
</div>

 js

function showBtn(){
if(document.getElementById('texter').value.length > 0){
document.getElementById('clearBtn').style.display = 'block';
}else{
document.getElementById('clearBtn').style.display = 'none';
}
}
function clearText(){
document.getElementById('texter').value = '';
document.getElementById('clearBtn').style.display = 'none';
}

追问

如果说，当我在输入框中增加一个文字，或减少一个文字时，在输入狂下方的显示要发生变化又怎么写呢？

追答

这个是ajax请求啦

原理是文本框文字每变动一次就像后台请求一次数据，下拉框根据后台返回的数据来展示数据

这个略麻烦，靠原生js代码量有点多，这里给一个jquery的例子

<input type="text" name="wb" id="wb" onKeyUp="askData();">
<select name="xl" id="xl">
</select>

function askData(){
$.ajax({
url: 'xxx',
type: 'POST',
data: {
'param': $('#wb').val()
},
success:function(data){
var insertHtml = '';
$.each(data, function(k, v) {
        insertHtml += '<option value="'+ v +'">'+ v +'</option>';
      });
      $('#xl').append(insertHtml);
}
});
}

使用前需引用jquery插件库

Answer 2

加个输入的change 事件，有内容时显示 X ，给x加个事件

追问

我想过change时间，但是还是不知道怎么实现