给input[text]添加icon，并且绑定事件

如上图实现右侧带clear icon的文本框。

一、比较常见的方法是：在文本框右侧添加 a标签，通过样式控制来实现点击clear icon清除文本框内容。

<input type="text" id="" class='' value="" style="width:100px"/>
<a href="javascript:void(0);">
<img id="" src="xxxx.png" class=''></a>

二、 clearable

html:

<input class="clearable" type="text" name="" value="" placeholder="" />

css:

.clearable{  background: #fff url(icoX.gif) no-repeat right -10px center;  border: 1px solid #999;  padding: 3px 18px 3px 4px;     /* Use the same right padding (18) in jQ! */  border-radius: 3px;  transition: background 0.4s;
}
.clearable.x  { background-position: right 5px center; } /* (jQ) Show icon */
.clearable.onX{ cursor: pointer; }              /* (jQ) hover cursor style */

JS:

function tog(v){return v?'addClass':'removeClass';}   $(document).on('input', '.clearable', function() {  $(this)[tog(this.value)]('x');
}).on('mousemove', '.x', function(e) {  $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');
}).on('click', '.onX', function(){  $(this).removeClass('x onX').val('').change();
});

　　给文本框内部的右侧添加了一个18px的背景图片（clear icon），然后控制鼠标事件，进入这个18px的区域的时候触发clear，清空文本框。

给input[text]添加icon，并且绑定事件相关推荐

jQuery给动态添加的元素绑定事件的方法
jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...
jQuery 为动态添加的元素绑定事件
在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...
Angularjs 动态添加指令并绑定事件
先说使用场景,动态生成DOM元素并绑定事件,非常常见的一种场景,用jq实现效果: http://jsbin.com/gajizuyuju/edit?html,js,output var count=0 ...
odoo中tree视图上面添加按钮并绑定事件
原文:https://blog.csdn.net/qq_42832858/article/details/86735745 1.通过qweb模板给相应模块上的tree视图上添加上⾃定义的按钮. 在's ...
js动态添加html元素绑定事件,JS实现动态添加DOM节点和事件的方法示例
本文实例讲述了JS实现动态添加DOM节点和事件的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: /p> "http://www.w3.org/TR/xht ...
动态添加html元素绑定事件,关于javascript：jQuery如何将onclick事件绑定到动态添加的HTML元素...
本问题已经有最佳答案,请猛点这里访问. 我想将onclick事件绑定到用jquery动态插入的元素但它从不运行绑定函数.如果您能指出这个示例为什么不起作用,以及如何使它正常运行,我将非常高兴: /p ...
python tkinter 窗口禁止编辑_tkinter的text控件，绑定事件后不能编辑了
tkinter的text控件,又有新的问题 DateCtrl.py from tkinter import * import tkinter.font as tkFont import calenda ...
ajax传向前台的html代码里又有事件的时候，绑定事件失败解决方法
为动态添加的元素绑定事件有以下几种方式: 1.delegate():向匹配元素的当前或未来的子元素附加一个或多个事件处理器 $(selector).delegate(childSelector,eve ...
jQuery向未来的元素添加事件处理程序(绑定事件)
2019独角兽企业重金招聘Python工程师标准>>> jQuery向未来的元素添加事件处理程序 ,使用 delegate() 方法向尚未创建的元素添加事件处理程序(绑定事件) $( ...

给input[text]添加icon，并且绑定事件

给input[text]添加icon，并且绑定事件相关推荐

最新文章

热门文章