有没有一种快速的方法来创建一个输入文本元素，在右边有一个图标，以清除输入元素本身(如谷歌搜索框)?
我环顾四周，但我只发现如何把一个图标作为输入元素的背景。有jQuery插件或其他什么?
我想在输入文本元素内的图标，类似于:
--------------------------------------------------
| X|
--------------------------------------------------
当前回答
在设计模式下将文本框类型更改为'search'或
<input type="search">
其他回答
您可以使用这些命令(没有引导)。
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>
我已经在CSS中创建了一个可清除的文本框。它不需要javascript代码使其工作
下面是演示链接
http://codepen.io/shidhincr/pen/ICLBD
在设计模式下将文本框类型更改为'search'或
<input type="search">
根据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>
我已经使用jQuery和bootstrap编写了一个简单的组件。 试试吧:https://github.com/mahpour/bootstrap-input-clear-button
