<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. Android自动化压力测试之Monkey Test （三）

    Monkey 是什么? Monkey是Google提供的一个用于稳定性与压力测试的命令行工具. Monkey路径: 路径:/System/framework/monkey.jar 启动脚本路径:/sy ...

  2. AndroidTips：selector的disable状态为什么无效？

    正确的姿势: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android=& ...

  3. SpringMVC解析5-DispatcherServlet逻辑细节

    MultipartContent类型的request处理 对于请求的处理,spring首先考虑的是对于Multipart的处理,如果是MultipartContent类型的request,则转换req ...

  4. SpringMVC解析1-使用示例

    Spring MVC分离了控制器.模型对象.分派器以及处理程序对象的角色,这种分离让它们更容易进行定制.Spring的MVC是基于servlet功能实现的,通过实现Servlet接口的Dispatch ...

  5. @import与link

    本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别. 1. 老祖宗的差别.link属于XHTML标签,而@import完全是CSS提供的一种方式. link标签除了可以加载CSS外,还可 ...

  6. poj3186 Treats for the Cows(区间)

    题目链接:http://poj.org/problem?id=3186 题意:第一个数是N,接下来N个数,每次只能从队列的首或者尾取出元素. ans=每次取出的值*出列的序号.求ans的最大值. 样例 ...

  7. 解决eclipse报PermGen space内存溢出异常的问题

    异常问题如下所示: 1.点击Eclipse->Window->Preferences,如下所示: 2.点击Server->Runtime Environments,选择Apache ...

  8. HDU4307 Matrix（最小割）

    题目 Source http://acm.hdu.edu.cn/showproblem.php?pid=4307 Description Let A be a 1*N matrix, and each ...

  9. 自定义UICollectionViewLayout之瀑布流

    目标效果 因为系统给我们提供的 UICollectionViewFlowLayout 布局类不能实现瀑布流的效果,如果我们想实现 瀑布流 的效果,需要自定义一个 UICollectionViewLay ...

  10. 熟悉熟悉常用的几个算法用JS的实现

    (1)数组去重 原理:定义一个对象obj,然后把数组元素作为obj的属性名,利用属性名是否重复进行判重 1 var unique = function(arr){ 2 let obj = {}; 3 ...