<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  ;
    border: 1px solid #bbb;
    display: inline-block;
    height: 28px;
    margin-right: 2px;
    vertical-align: top;
    width: 175px;
    position: relative;
}
.delquery {   /*清除图标*/
    background-position:  -320px;
    cursor: pointer;
    height: 20px;
    margin: 4px 0px  ;
    position: absolute;
    right: ;
    top: ;
    width: 20px;
}
.input_key { /*input框*/
    background: #fff none repeat scroll  ;
    border:  none;
    border-radius: ;
    font: 16px/22px arial;
    height: 18px;
    margin: 5px   5px;
    outline:  none;
    padding: ;
    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=" 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>

类似input框内最右边添加图标，有清空功能的更多相关文章

  1. input框内默认文字点击消失

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. input框内的单引号，双引号转译

    主要是在后台传前端之前先把变量值替换单引号双引号成转译付. $bianlian是要替换的变量 两种方法 1.php后台输出值先转译 //双引号替换成转译符 $bianlian=preg_replace ...

  3. zTree重命名节点时，操作的那个dom（类似input框那个）怎么写

    <script type="text/javascript"> //tree的编辑节点的方法 ztree.editName(nodeNew[0]); /// $(&qu ...

  4. 在 input 上添加图标字体时无法添加的问题

    效果:一个搜索框.如图: 实施过程:一开始,将搜索框分为2部分,用2个 input ,一个 search ,一个 button ,然后给 type="button" 的input ...

  5. h5 页面点击添加添加input框

    h5 页面点击添加添加input框 前段时间有个需求,页面要能点击添加按钮控制input框的个数,当时感觉有点难,就没做,这两个又遇到了,没办法写了个简单的 效果图,加号增加,减号减少 直接上代码, ...

  6. bootstrap的两种在input框里面增加一个图标的方式

    具体代码如下: <div class="input-group"> <div class="input-icon-group"> < ...

  7. bootstrap在input框中加入icon图标

    <form class="form-horizontal"> <div class="form-group has-feedback"> ...

  8. 让单选input框，不在被选中，添加disabled即可。输入框input的一些技巧

    1.让单选input框,不在被选中,添加disabled即可 2.input的file文件对象的清空,只需要input.val("");就可以了.

  9. SharePoint 2010 类似人人网站内信功能实施

    简介:用SharePoint代码加实施的方式,完成类似人人网站内信功能,当然,实现的比较简单,样式也比较难看,只为给大家一个实施的简单思路,如有谬误,还请见谅.当然,还有就是截图比较长,当然为了让大家 ...

随机推荐

  1. hdu 2669 Romantic

    Romantic Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Sta ...

  2. jQuery插件开发--（转）

    1,开始 可以通过为jQuery.fn增加一个新的函数来编写jQuery插件.属性的名字就是你的插件的名字: jQuery.fn.myPlugin = function(){ //开始写你的代码吧! ...

  3. 浩瀚移动POS收银开单扫描解决方案PDA仓储系统,无线批发,移动批发,无线POS,无线销售APP-车销管理PDA

    适用范围 各种业态的批发商铺.批发市场.订货会.展销会.配送中心仓库…… 产品简介 随着移动技术与智能PDA设备的迅猛发展,中国已经跨步进入移动信息化社会.移动商务是移动信息社会的重要载体与形式,它开 ...

  4. js-DOM，DOM扩展

    DOM: 1. 了解节点的信息:nodeName(属性的标签名),nodeValue两个属性 在取得信息之前要进行判断是不是节点,节点类型由12个数值常量进行表示 2.每个节点都有一个childNod ...

  5. java发送短信--httpclient方式

    最近头让我写个发送短信的java程序检测BI系统,检查数据库是否有异常发送,有则发送短信到头的手机里.这里我直说httpclient方式的get请求方式,并且已经有方式的短信的接口了,所以只要再加上参 ...

  6. delphi 时间格式操作

    FormatDateTime('yyyy-mm-dd hh:nn:ss',Now) FormatDateTime('hh:mm:ss:zz',Now) if (TimeOf(now) < pub ...

  7. Python学习笔记08

      正则表达式包re match,search,sub re.match(pattern, string, flags=0) re.search(pattern, string, flags=0) r ...

  8. 安装配置hive中遇到的问题

    1. mysql中添加用户名时总出现如下问题:ERROR 1290 (HY000): The MySQL server is running with the --skip-grant-tables ...

  9. java-类

    浏览以下内容前,请点击并阅读 声明 java是面向对象的语言,而对象的创建,则需要借助类,类可以说是一个创建对象的模具(个人理解). 类的定义 以下构成定义类的最简单(不能再简单)语句: class ...

  10. ccc autotest

    module.exports.assert = function (express,value,msg) { if(express==value) { cc.info("test:" ...