<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. phpstorm的安装、破解、和汉化

    1.去官网下载最新版安装. 2.完成选择购买软件,下面选择中间那个账户方法License server,把这条链接复制下去:http://idea.qinxi1992.cn 3.下载汉化包resour ...

  2. POJ 1509 最小表示法

    题目链接:http://poj.org/problem?id=1509 题意:给定一个字符串,求一个起点使字符串从该起点起的字符串字典序最小[题目的字符串起点从1开始] 思路:最小表示法模板题 #de ...

  3. 【gulp-sass】error: File to import not found or unreadable

    简要记录一下在使用gulp-sass时候踩的坑,虽然不明所以然,但是似乎在https://github.com/dlmanning/gulp-sass/issues/1 找到了答案. 在使用gulpf ...

  4. SQL ISNULL 函数

    sql 中 NULL 值的处理:微软的 ISNULL() 函数用于规定如何处理 NULL 值.NVL(), IFNULL() 和 COALESCE() 函数也可以达到相同的结果.语法ISNULL ( ...

  5. http://m.blog.csdn.net/article/details?id=8237698

    http://m.blog.csdn.net/article/details?id=8237698

  6. Bower In ASP.NET Core

    创建一个ASP.NET Core MVC项目的时候,会产生一个bower.json的文件,用于管理前段的js. NPM & Bower NPM主要运用于Node.js项目的内部依赖包管理,安装 ...

  7. iris数据集

    iris以鸢尾花的特征作为数据来源,数据集包含150个数据集,分为3类,每类50个数据,每个数据包含4个属性,是在数据挖掘.数据分类中非常常用的测试集.训练集. 链接地址

  8. UVa1161 Objective: Berlin（最大流）

    题目 Source https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_pr ...

  9. 将公司的主要项目从eclipse迁移到android studio for mac环境（1）

    上星期,我决定要解决这个问题.理由如下: 3个月之前,我已经投入一段时间要做好这个迁移工作,直到最后,我发现能够安装了,但是运行不了,这个过程也看不到bugly上传,在找不到原因的情况下,我放弃了. ...

  10. Java解析文本

    import java.io.*; import java.util.*; public class FileManager { public List<Dishes> parseFile ...