<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. 【tomcat 无法部署】svn上下载的maven项目无法部署到tomcat中

    问题: svn上下载的maven项目无法部署到tomcat中,tomcat不识别项目,但是这个项目确实是web项目 发现的过程: 然后依次产看项目的编译版本: 项目的依赖架包: 才发现: 解决方法: ...

  2. 在C#代码中应用Log4Net（二）典型的使用方式(转)

    不管用什么框架,学什么东西,最初的想法还不是尽快地用上这个框架,所以我们在这个章节还是不打算介绍具体配置节的应用,而是直接给出一个经典的使用样例,让你尽快上手.即使你对Log4Net的配置不熟悉也完全 ...

  3. css随记01编辑技巧,背景与边框

    代码优化 一个按钮的例子,使其值同比例变化; button{ color: white; background: #58a linear-gradient(#77a0bb, #58a); paddin ...

  4. 分享Kali Linux 2016.2第47周虚拟机

    分享Kali Linux 2016.2第47周虚拟机该虚拟机使用Kali Linux 2016.2第47周的64位镜像安装而成.基本设置如下:(1)该系统默认设置单CPU双核,内存为2GB,硬盘为50 ...

  5. vs2010 安装MVC 3.0

    下载链接如下: MVC 3安装包:http://www.microsoft.com/downloads/zh-cn/details.aspx?familyid=d2928bc1-f48c-4e95-a ...

  6. MFC CPen CBrush CFont

    在OnDraw函数内定义后使用 使用时,要pDC->SelectObject(),如pDC->SelectObject(font); CPen://draw line Pen.Create ...

  7. 关于把世界坐标投射到屏幕上转换为屏幕2D坐标

    如果使用使用Project World to Screen 在一些分辨率一下就出现坐标错误. 比如我设置的UMG分辨率为1280*720,但是他的(1280,720)的坐标并不在UMG的右下角的边缘上 ...

  8. HTML5拖放事件（Drag-and-Drop,DnD）

    拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 拖放是在“拖放源(drag source)”和“拖放目标(drop target ...

  9. BZOJ4113 : [Wf2015]Qanat

    设$f_i$表示用$i$个辅助井时代价的最小值,$x_i$表示此时最后一个辅助井的位置. 则$f_i$是关于$x_i$的一个二次函数,其中系数跟$f_{i-1}$有关,递推求出极值点即可. 时间复杂度 ...

  10. [转]基于gulp和webpack的前端工程化

    本文样例代码 :https://github.com/demohi/learning-gulp 本文主要简单介绍一下基于gulp和webpack的前端工程化. 技术栈 React.js reFlux ...