标签：
<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; width: 175px; position: relative; } .delquery { /*清除图标*/ background-position: 0 -320px; cursor: pointer; height: 20px; margin: 4px 0px 0 0; position: absolute; right: 0; top: 0; width: 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; width: 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>
标签：
原文地址：http://www.cnblogs.com/qq931399960/p/4567385.html
