输入文本中的清晰图标

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (10)

我想知道是否有一种快速的方法来创建一个输入文本元素,右边有一个图标来清除输入元素本身(比如GoogleSearch框)。

我环顾四周,只发现如何将图标作为输入元素的背景。

有没有jQuery插件或其他什么?

--------------------------------------------------
|                                               X|
--------------------------------------------------
提问于
用户回答回答于

加一个type="search"对你的投入

支持是相当不错的,但是在IE中不工作<10

<input type="search">

如果你需要IE9支援以下是一些解决办法

使用标准<input type="text">和一些HTML元素:

/**
 * Clearable text inputs
 */
$(".clearable").each(function() {
  
  var $inp = $(this).find("input:text"),
      $cle = $(this).find(".clearable__clear");

  $inp.on("input", function(){
    $cle.toggle(!!this.value);
  });
  
  $cle.on("touchstart click", function(e) {
    e.preventDefault();
    $inp.val("").trigger("input");
  });
  
});
/* Clearable text inputs */
.clearable{
  position: relative;
  display: inline-block;
}
.clearable input[type=text]{
  padding-right: 24px;
  width: 100%;
  box-sizing: border-box;
}
.clearable__clear{
  display: none;
  position: absolute;
  right:0; top:0;
  padding: 0 8px;
  font-style: normal;
  font-size: 1.2em;
  user-select: none;
  cursor: pointer;
}
.clearable input::-ms-clear {  /* Remove IE default X */
  display: none;
}
<span class="clearable">
  <input type="text" name="" value="" placeholder="">
  <i class="clearable__clear">&times;</i>
</span>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

只使用<input class="clearable" type="text">(没有其他内容)

设置aclass="clearable"然后播放它的背景图片:

/**
 * Clearable text inputs
 */
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('touchstart click', '.onX', function( ev ){
    ev.preventDefault();
    $(this).removeClass('x onX').val('').change();
});

// $('.clearable').trigger("input");
// Uncomment the line above if you pre-fill values from LS or server
/* Clearable text inputs */
.clearable{
  background: #fff url(http://i.stack.imgur.com/mJotv.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 */
.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */
<input class="clearable" type="text" name="" value="" placeholder="" />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

jsBin演示

技巧是将一些正确的填充(我使用了18 px)设置为input and push the background-image right, out of sight (I used right -10px center)

这个18 px填充将防止文本隐藏在图标下面(虽然是可见的)。

JQ将添加该类x(如果input(有价值)显示清晰的图标。

现在我们所需要的就是用JQ来锁定类的输入。x并检测到mousemove如果鼠标位于18 px“x”区域内,则添加类。

单击onX类删除所有类,重置输入值并隐藏图标。

7x7px gif:

BASE 64字符串:

data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=
用户回答回答于

我是否可以建议,如果可以只使用符合html 5的浏览器,只需使用:

<input type="search" />

Chrome(Ubuntu11.04)中,这需要在input元素以前将出现明文图像/功能。

扫码关注云+社区