Code
2025-02-09 05:00:12

清除输入文本内的图标

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

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

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

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

当前回答

<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>
2018-07-01 22:07:45

其他回答

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

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>

2021-04-07 02:18:38

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

您提到过希望它位于输入文本的右侧。所以，最好的方法是在输入框旁边创建一个图像。如果要查看方框内的内容，可以使用背景图像，但可能无法编写脚本来清除方框。

因此，插入和图像并编写JavaScript代码来清除文本框。

2011-06-06 22:04:22

根据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>&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 -如果输入元素有值，只显示'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>

2015-11-13 00:19:15

像这样的事情?? 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>
2016-11-22 16:10:21

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

<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

2011-06-06 22:02:21

推荐文章

aliyun

最新文章

标签

2025 code 京ICP备15047053号-1