有没有一种快速的方法来创建一个输入文本元素，在右边有一个图标，以清除输入元素本身(如谷歌搜索框)?
我环顾四周，但我只发现如何把一个图标作为输入元素的背景。有jQuery插件或其他什么?
我想在输入文本元素内的图标，类似于:
--------------------------------------------------
| X|
--------------------------------------------------
当前回答
我的建议是，如果你不介意仅限于html 5兼容的浏览器，只需使用:
<input type="search" />
JS小提琴演示
不可否认，在Chromium (Ubuntu 11.04)中，这确实要求在明文图像/功能出现之前在输入元素中有文本。
参考:
深入HTML 5:一种疯狂的形式。 输入类型=搜索-搜索字段(新)HTML5。
其他回答
在设计模式下将文本框类型更改为'search'或
<input type="search">
我已经在CSS中创建了一个可清除的文本框。它不需要javascript代码使其工作
下面是演示链接
http://codepen.io/shidhincr/pen/ICLBD
根据MDN， <input type="search" />目前在所有现代浏览器中都被支持:
<输入类型=“搜索”=“清除此”。/>
但是，如果你想要在不同浏览器中保持一致的不同行为，这里有一些轻量级的替代方案，只需要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>×</span> </div> <div class="clearable-input"> <input type="text" value="Clear this." /> <span data-clear-input>×</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>×</span> </div> <div class="clearable-input"> <input type="text" value="Clear this." /> <span data-clear-input>×</span> </div>
选项3 -如果输入元素有值，只显示'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>×</span> </div> <div class="clearable-input"> <input type="text" value="Clear this." /> <span data-clear-input>×</span> </div>
在输入中添加type="search" 支持是相当不错的，但将无法在IE<10
= >“搜索”型输入<
老版本浏览器
如果你需要IE9支持，这里有一些变通方法
使用标准的<input type="text">和一些HTML元素:
/** * Clearable text inputs */ $(".clearable").each(function() { const $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">×</i> </span> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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/3.5.1/jquery.min.js"></script>
The trick is to set some right padding (I used 18px) to the input and push the background-image right, out of sight (I used right -10px center). That 18px padding will prevent the text hide underneath the icon (while visible). jQuery will add the class "x" (if input has value) showing the clear icon. Now all we need is to target with jQ the inputs with class x and detect on mousemove if the mouse is inside that 18px "x" area; if inside, add the class onX. Clicking the onX class removes all classes, resets the input value and hides the icon.
7x7px 动图：
Base64字符串:
data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=
jQuery Mobile现在内置了:
<input type="text" name="clear" id="clear-demo" value="" data-clear-btn="true">
Jquery移动API TextInput文档
