<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. loadrunner中切割字符串

    下面函数的作用: http://blog.csdn.net/hgj125073/article/details/8447605 通过-与: 字符切割字符串,即-与:字符已经被\0 字符取代 char  ...

  2. Liferay 6.2 改造系列之十七：当Portlet无权限时，不显示错误信息

    在/portal-master/portal-impl/src/portal.properties文件中,有如下配置: # # Set this to true if users are shown ...

  3. 6.android加密解析

    编码.数字摘要.加密.解密 UrlEncoder /Urldecoder String str = "http://www.baidu.com?serach = 哈哈"; Stri ...

  4. hdu1248完全背包

    不死族的巫妖王发工资拉,死亡骑士拿到一张N元的钞票(记住,只有一张钞票),为了防止自己在战斗中频繁的死掉,他决定给自己买一些道具,于是他来到了地精商店前.死亡骑士:"我要买道具!" ...

  5. js-变量、作用域和内存问题,引用类型

    变量.作用域和内存问题 1.变量可能包含两种不同数据类型的值:基本类型值以及引用类型值:引用类型值保存的是内存中的对象 2.对象是按值传递的, function setName(obj){ obj.n ...

  6. node express新项目默认主文件app.js

    var express = require('express'); var path = require('path'); var favicon = require('serve-favicon') ...

  7. [POJ1015]Jury Compromise

    题目大意:要求你从n个人中选出m个,每个人有两个值p[i],D[i],要求选出的人p总和与D总和的差值最小.若有相同解,则输出p总+D总最大的方案. 动态规划. 一直在想到底是n枚举外面还是m放外面, ...

  8. C# 词法分析器（六）构造词法分析器

    系列导航 (一)词法分析介绍 (二)输入缓冲和代码定位 (三)正则表达式 (四)构造 NFA (五)转换 DFA (六)构造词法分析器 (七)总结 现在最核心的 DFA 已经成功构造出来了,最后一步就 ...

  9. javaEE基础

    1.拦截器与过滤器 过滤器(filter),过滤器处于客户端与Web资源(Servlet.JSP.HTML)之间,客户端与Web资源之间的请求和响应都要通过过滤器进行过滤.如过滤编码,IP 拦截器(i ...

  10. ccc 音乐播放

    cc.Class({ extends: cc.Component, properties: { musicPlayer: { default: null, type: cc.AudioSource } ...