<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- js引入 -->
<script type="text/javascript" src="../js/jquery-1.10.2.js" ></script>
<link href="bootstrap.css" rel="stylesheet">
<style type="text/css">
.round { /*大span*/
background: #fff none repeat scroll 0 0;
border: 1px solid #bbb;
display: inline-block;
height: 28px;
margin-right: 2px;
vertical-align: top;
175px;
position: relative;
}
.delquery { /*清除图标*/
background-position: 0 -320px;
cursor: pointer;
height: 20px;
margin: 4px 0px 0 0;
position: absolute;
right: 0;
top: 0;
20px;
}
.input_key { /*input框*/
background: #fff none repeat scroll 0 0;
border: 0 none;
border-radius: 0;
font: 16px/22px arial;
height: 18px;
margin: 5px 0 0 5px;
outline: 0 none;
padding: 0;
140px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>监听_input值的变化</h1>
<table>
<tr>
<td>
<input type="text"/>
</td>
</tr>
<tr>
<td>
<span class="round" id="suggest-align">
<input type="text" autocomplete="off" maxlength="100" value="" class="input_key" tabindex="1" name="q" id="keyword">
<span title="清空" class="delquery" id="clear" style="display: none;">x</span>
</span>
</td>
</tr>
</table>
</body>
<script type="text/javascript">
$(function(){
$("#clear").click(function(){
$(".input_key").val("");
$(".input_key").focus();
$(this).hide();
})
/* var tValue;
setInterval(function(){
if(tValue !=$("#keyword").val()){ //这里写自己的业务逻辑代码
if ($(".input_key").val().trim()!="") {
$("#clear").show();
}
tValue =$("#keyword").val();
}
},100); */
var tValue;
$("#keyword").keydown(function(){
if ($(".input_key").val().trim()!="") {
$("#clear").show();
}
});
$("#keyword").keyup(function(){
if ($(".input_key").val().trim()!="") {
$("#clear").show();
}
});
})
</script>
</html>