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

最新推荐文章于 2024-11-12 12:01:10 发布

alex8046

最新推荐文章于 2024-11-12 12:01:10 发布

阅读量6.7k

点赞数

CC 4.0 BY-SA版权

文章标签： html javascript css 文本框

本文链接：https://blog.youkuaiyun.com/alex8046/article/details/41315469

javascript 同时被 3 个专栏收录

139 篇文章

订阅专栏

css/css3

79 篇文章

订阅专栏

解决方案

43 篇文章

订阅专栏

本文介绍两种实现带有清除图标的输入框的方法。一种是在输入框右侧添加链接和图片，通过样式控制清除操作；另一种是使用纯CSS和jQuery实现，通过背景图片和鼠标事件控制清除图标显示及清除文本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如上图实现右侧带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>

二、"stackoverflow"上发现一老外，用了另一种实现：

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，清空文本框。