有没有一种快速的方法来创建一个输入文本元素,在右边有一个图标,以清除输入元素本身(如谷歌搜索框)?

我环顾四周,但我只发现如何把一个图标作为输入元素的背景。有jQuery插件或其他什么?

我想在输入文本元素内的图标,类似于:

--------------------------------------------------
|                                               X|
--------------------------------------------------

当前回答

由于没有一个解决方案能够真正满足我们的需求,我们想出了一个简单的jQuery插件,叫做jQuery- clearsearch -

使用它就像:

<input class="clearable" type="text" placeholder="search">

<script type="text/javascript">
    $('.clearable').clearSearch();
</script>

​ 例如:http://jsfiddle.net/wldaunfr/FERw3/

其他回答

我已经使用jQuery和bootstrap编写了一个简单的组件。 试试吧:https://github.com/mahpour/bootstrap-input-clear-button

您可以使用这些命令(没有引导)。

Array.from(document.querySelectorAll('.search-field')).forEach(field => { field.querySelector('span').addEventListener('click', e => { field.querySelector('input').value = ''; }); }); :root { --theme-color: teal; } .wrapper { width: 80%; margin: 0 auto; } div { position: relative; } input { background:none; outline:none; display: inline-block; width: 100%; margin: 8px 0; padding: 13px 15px; padding-right: 42.5px; border: 1px solid var(--theme-color); border-radius: 5px; box-sizing: border-box; } span { position: absolute; top: 0; right: 0; margin: 8px 0; padding: 13px 15px; color: var(--theme-color); font-weight: bold; cursor: pointer; } span:after { content: '\2716'; } <div class="wrapper"> <div class="search-field"> <input placeholder="Search..." /> <span></span> </div> </div>

我的建议是,如果你不介意仅限于html 5兼容的浏览器,只需使用:

<input type="search" />

JS小提琴演示

不可否认,在Chromium (Ubuntu 11.04)中,这确实要求在明文图像/功能出现之前在输入元素中有文本。

参考:

深入HTML 5:一种疯狂的形式。 输入类型=搜索-搜索字段(新)HTML5。

使用简单的绝对定位——这并不难。

jQuery:

$('span').click(function(){ $('input', $(this).parent()).val(''); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="position:relative; width:min-content;"> <input> <span style="position:absolute;right:10px">x</span> </div> <div style="position:relative; width:min-content;"> <input> <span style="position:absolute;right:10px">x</span> </div> <div style="position:relative; width:min-content;"> <input> <span style="position:absolute;right:10px">x</span> </div>

香草JS:

var spans = document.getElementsByTagName("span"); function clickListener(e) { e.target.parentElement.getElementsByTagName("input")[0].value = ""; } for (let i = 0; i < spans.length; i++) { spans[i].addEventListener("click", clickListener); } <div style="position:relative; width:min-content;"> <input> <span style="position:absolute;right:10px">x</span> </div> <div style="position:relative; width:min-content;"> <input> <span style="position:absolute;right:10px">x</span> </div> <div style="position:relative; width:min-content;"> <input> <span style="position:absolute;right:10px">x</span> </div>

你可以使用一个带有图像样式的重置按钮…

<form action="" method="get">
   <input type="text" name="search" required="required" placeholder="type here" />
   <input type="reset" value="" alt="clear" />
</form>

<style>
   input[type="text"]
   {
      height: 38px;
      font-size: 15pt;
   }

   input[type="text"]:invalid + input[type="reset"]{
     display: none;
   } 

   input[type="reset"]
   {
      background-image: url( http://png-5.findicons.com/files/icons/1150/tango/32/edit_clear.png );
      background-position: center center;
      background-repeat: no-repeat;
      height: 38px;
      width: 38px;
      border: none;
      background-color: transparent;
      cursor: pointer;
      position: relative;
      top: -9px;
      left: -44px;
   }
</style>

在这里查看它的实际操作:http://jsbin.com/uloli3/63