输入文字中的清除图示

184

有没有一种快速的方法来创建带有右侧图标的输入文本元素，以清除输入元素本身（例如google搜索框）？

我环顾四周，但只发现了如何放置图标作为输入元素的背景。是否有jQuery插件或其他工具？

我想要输入文本元素中的图标，例如：

--------------------------------------------------
|                                               X|
--------------------------------------------------
javascript  jquery  html  css 
— 乔凡尼·迪米利亚
source
3
一个jQuery插件将图像放置在输入框上？我错过了什么还是什么？
— 基督教徒
1
@Christian Sciberras正如您从我选择的答案中所看到的，它可以是一个jquery插件...
— Giovanni Di Milia11
1
您可以使用jQuery插件来显示普通警报框。这并不意味着您确实必须这样做，而且在大多数情况下，这是过度设计的膨胀。哦，顺便说一下，您选择的不是jQuery插件，而是javascript，html和css的组合。插件将是单个文件/脚本，带有包含相关详细信息的jQuery签名。
— 基督教徒
1
@Christian Sciberras：我可以区分jQuery插件以及javascript和CSS的混合。我的意思是，如果您想做点漂亮的事情，则不能仅在输入框中放置图像。
— Giovanni Di Milia
寻找此问题的人们也将需要以下信息：您如何检测对“搜索” HTML5输入的清除？
— brasofilo

Answers:

342

将a添加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">（没有其他元素）

输入元素内的清除图标

设置一个class="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演示

技巧是为设置一些右填充（我使用18px），input然后将背景图像向右推，以至看不见（我使用right -10px center）。
18px的填充将防止文本隐藏在图标下方（可见时）。
jQ将添加显示清除图标的类x（如果input有值）。
现在，我们需要的是用jQ定位类的输入，x并检测mousemove鼠标是否在18px“ x”区域内；如果在内部，则添加class onX。
单击onX类将删除所有类，重置输入值并隐藏图标。

7x7px gif： 清除图示7x7

Base64字符串：

data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=
— 罗科·C·布尔扬
source
5
我自由地借用了这段代码中的一些想法来制作标签云生成器（带有纯css标签以及upvote和downvote按钮）。希望您的浏览器看起来还可以。在jsfiddle.net/7PnKS上
— -mrBorna'9
1
哇，非常好的解决方案。那就是我要找的东西。谢谢。但是，如何将“ x”图像更改为使用Bootstrap 3 glyphicon？因为glyphicon是字体，所以缩小时显示效果更好。
— user1995781
1
很好，但是背景图片可以与其他CSS冲突。wldaunfr的以下答案是指一个整洁的jQuery插件：plugins.jquery.com/clearsearch
— Nick Westgate
1
在最新的Firefox和Chrome中对我来说效果很好。但必须进行更改.on('touchstart click', '.onX', ...才能.on('touchstart click', '.onX, .x', ...使其在iOS上运行。
— kritzikratzi
1
@ RokoC.Buljan我刚刚再次测试过，这是我的发现1）在输入文本框中输入几个字符2）出现“ X”图标3）尝试单击“ X”图标，但文本文本无法清除。注意：此时，iPhone键盘仍处于活动状态且未被隐藏。4）如果单击“完成”按钮以隐藏键盘，然后单击“ X”图标，则该文本将立即正确清除。似乎在显示iPhone键盘时无法用'X'清除文本。
— 版主
61

我可以建议，如果您对仅限于html 5的浏览器还可以的话，只需使用：

<input type="search" />

JS小提琴演示

诚然，在Chromium（Ubuntu 11.04）中，这确实要求input元素内必须有文本，然后才能显示纯文本图像/功能。

参考：

— 大卫说恢复莫妮卡
source
11
对其他开发人员的帮助：如果使用引导CSS平台，请删除样式“ -webkit-appearance：textfield;”。在bootstrap.css input [type =“ search”] {-webkit-box-sizing：content-box; -moz-box-sizing：内容框；框大小：内容框；-webkit-appearance：文本字段；}
— Riccardo Bassilichi
1
有没有办法改变X的颜色？
— rotaercz
1
@RiccardoBassilichi有没有办法扩展我的css文件，这样我就不必编辑原始的bootstrap.css仍然可以正常工作？
— supersan 2015年
我觉得不行！但是我不是CSS向导！:-(
— Riccardo Bassilichi
2
不幸的是这不是Firefox支持，请参阅：developer.mozilla.org/en-US/docs/Web/CSS/...
— 纪尧姆Husta
27

您可以使用带有图片样式的重置按钮...

<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

— 小吉
source
10
这将重置整个表单，而不仅仅是一个字段
— konung 2012年
输入为空时如何隐藏重置图像？KOGI，您能举个例子吗？
— 哈利
24

我已经在CSS中创建了一个可清除的文本框。它不需要任何JavaScript代码即可使其正常工作

以下是演示链接

http://codepen.io/shidhincr/pen/ICLBD

— Shidhin铬
source
1
优秀的！有关浏览器支持的一些信息会有所帮助。
— 伊恩·纽森
1
今天对我来说，它在FF 27.0.1中已被破坏。
— Nick Westgate 2014年
3
文本未重新定位以为“ x”按钮腾出空间。您看不到按钮后面的文字。
— 深红色克里斯
这仍然会清除整个表格，而不仅仅是一个字段。
— 埃里克·韦兰
23

根据MDN，<input type="search" />当前所有现代浏览器均支持：

输入类型=搜索

<input type="search" value="Clear this." />
展开摘要

但是，如果您想要在浏览器之间保持一致的不同行为，则可以使用一些仅需JavaScript的轻量级替代方案：

选项1-始终显示“ x” ：（此处为示例）

Array.prototype.forEach.call(document.querySelectorAll('.clearable-input>[data-clear-input]'), function(el) {
  el.addEventListener('click', function(e) {
    e.target.previousElementSibling.value = '';
  });
});
.clearable-input {
  position: relative;
  display: inline-block;
}
.clearable-input > input {
  padding-right: 1.4em;
}
.clearable-input > [data-clear-input] {
  position: absolute;
  top: 0;
  right: 0;
  font-weight: bold;
  font-size: 1.4em;
  padding: 0 0.2em;
  line-height: 1em;
  cursor: pointer;
}
.clearable-input > input::-ms-clear {
  display: none;
}
<p>Always display the 'x':</p>

<div class="clearable-input">
  <input type="text" />
  <span data-clear-input>&times;</span>
</div>

<div class="clearable-input">
  <input type="text" value="Clear this." />
  <span data-clear-input>&times;</span>
</div>
展开摘要

选项2-仅将鼠标悬停在字段上时显示“ x” ：（此处为示例）

Array.prototype.forEach.call(document.querySelectorAll('.clearable-input>[data-clear-input]'), function(el) {
  el.addEventListener('click', function(e) {
    e.target.previousElementSibling.value = '';
  });
});
.clearable-input {
  position: relative;
  display: inline-block;
}
.clearable-input > input {
  padding-right: 1.4em;
}
.clearable-input:hover > [data-clear-input] {
  display: block;
}
.clearable-input > [data-clear-input] {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  font-weight: bold;
  font-size: 1.4em;
  padding: 0 0.2em;
  line-height: 1em;
  cursor: pointer;
}
.clearable-input > input::-ms-clear {
  display: none;
}
<p>Only display the 'x' when hovering over the field:</p>

<div class="clearable-input">
  <input type="text" />
  <span data-clear-input>&times;</span>
</div>

<div class="clearable-input">
  <input type="text" value="Clear this." />
  <span data-clear-input>&times;</span>
</div>
展开摘要

选项3-仅在input元素具有值的情况下显示“ x” ：（此处为示例）

Array.prototype.forEach.call(document.querySelectorAll('.clearable-input'), function(el) {
  var input = el.querySelector('input');

  conditionallyHideClearIcon();
  input.addEventListener('input', conditionallyHideClearIcon);
  el.querySelector('[data-clear-input]').addEventListener('click', function(e) {
    input.value = '';
    conditionallyHideClearIcon();
  });

  function conditionallyHideClearIcon(e) {
    var target = (e && e.target) || input;
    target.nextElementSibling.style.display = target.value ? 'block' : 'none';
  }
});
.clearable-input {
  position: relative;
  display: inline-block;
}
.clearable-input > input {
  padding-right: 1.4em;
}
.clearable-input >[data-clear-input] {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  font-weight: bold;
  font-size: 1.4em;
  padding: 0 0.2em;
  line-height: 1em;
  cursor: pointer;
}
.clearable-input > input::-ms-clear {
  display: none;
}
<p>Only display the 'x' if the `input` element has a value:</p>

<div class="clearable-input">
  <input type="text" />
  <span data-clear-input>&times;</span>
</div>

<div class="clearable-input">
  <input type="text" value="Clear this." />
  <span data-clear-input>&times;</span>
</div>
展开摘要

— 乔什·克罗齐耶（Josh Crozier）
source
9

由于所有解决方案都不能真正满足我们的要求，因此我们提出了一个简单的jQuery插件jQuery-ClearSearch -

使用它就像：

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

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

例子：http : //jsfiddle.net/wldaunfr/FERw3/

— wldaunfr
source
在Firefox 45中工作
— Jeff Davis
1
似乎在最新的Google Chrome浏览器（v。70〜Nov 2018）中无法正常工作
— Ben Clarke
3

编辑：我找到了此链接。希望能帮助到你。http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html

您已经在输入文本的右侧提到了您想要的内容。因此，最好的方法是在输入框旁边创建一个图像。如果您正在寻找盒子中的东西，则可以使用背景图像，但可能无法编写脚本来清除盒子。

因此，插入并镜像并编写JavaScript代码以清除文本框。

— 贾斯佩罗
source
我的意思是在输入框的右边，但在输入本身内部，就像google一样
— Giovanni Di Milia
使用背景图像模仿一个按钮，并用下面的代码<input type="text" name="Search" value="Search..." onclick="this.value='';">
— Jaspero
这不是我想做的事：我想要一个标志，只有当点击的清除输入....
— 乔瓦尼·狄眯俩
3

如果您希望它像Google一样，那么您应该知道“ X”实际上不在 <input> -它们彼此相邻，外部容器的样式看起来像文本框。

HTML：

<form>
    <span class="x-input">
        <input type="text" class="x-input-text" />
        <input type="reset" />
    </span>
</form>

CSS：

.x-input {
    border: 1px solid #ccc;
}

.x-input input.x-input-text {
    border: 0;
    outline: 0;
}

示例：http：//jsfiddle.net/VTvNX/

— 乔纳森·洛诺夫斯基
source
1

这样的事情？ Jsfiddle演示

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    .searchinput{
    display:inline-block;vertical-align: bottom;
    width:30%;padding: 5px;padding-right:27px;border:1px solid #ccc;
        outline: none;
}
        .clearspace{width: 20px;display: inline-block;margin-left:-25px;
}
.clear {
    width: 20px;
    transition: max-width 0.3s;overflow: hidden;float: right;
    display: block;max-width: 0px;
}

.show {
    cursor: pointer;width: 20px;max-width:20px;
}
form{white-space: nowrap;}

    </style>
</head>
<body>
<form>
<input type="text" class="searchinput">
</form>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script> <script>
$(document).ready(function() {
$("input.searchinput").after('<span class="clearspace"><i class="clear" title="clear">&cross;</i></span>');
$("input.searchinput").on('keyup input',function(){
if ($(this).val()) {$(".clear").addClass("show");} else {$(".clear").removeClass("show");}
});
$('.clear').click(function(){
    $('input.searchinput').val('').focus();
    $(".clear").removeClass("show");
});
});
</script>
</body>
</html>
— 土岐
source
1 
<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>
— 朱宝拉·萨克（Juboraj Sarker）
source
1

您可以使用此命令执行操作（不使用Bootstrap）。

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>
展开摘要

— 安德烈斯·吉门尼斯
source
0

这是一个jQuery插件（最后是一个演示）。

http://jsfiddle.net/e4qhW/3/

我这样做主要是为了举例说明（以及个人挑战）。尽管欢迎投票，但其他答案也会按时分发，应得到应有的认可。

在我看来，它仍然是过度设计的（除非它成为UI库的一部分）。

— 基督教
source
如果您清除内容并再次输入，则...不再有x按钮
— Roko C. Buljan
哈哈哈比它看起来像是个2岁大的bug；）很高兴看到您仍然在这里
— Roko C. Buljan
0

使用jquery插件，我已经适应了我的需求，添加了自定义选项并创建了一个新插件。您可以在这里找到它：https : //github.com/david-dlc-cerezo/jquery-clearField

一个简单用法的示例：

<script src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'></script>
<script src='src/jquery.clearField.js'></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="css/jquery.clearField.css">

<table>
    <tr>
        <td><input name="test1" id="test1" clas="test" type='text'></td>
        <td>Empty</td>
    </tr>
    <tr>
        <td><input name="test2" id="test2" clas="test" type='text' value='abc'></td>
        <td>Not empty</td>
    </tr>
</table>

<script>
    $('.test').clearField();
</script>

获得这样的东西：

在此处输入图片说明

— 大卫
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.