如何在文本输入中插入删除图标并实现删除文本

How to insert a delete icon to text input and implement deleting text

本文关键字：文本 删除 图标 实现 插入 输入      更新时间：2023-09-26

我创建以下文本输入：

<input type="text" class="signup-input text-value" name="" placeholder="e.g. example@url.com">

我必须实现一个删除功能（在输入的末尾显示一个"x"图标）。

您可以将type设置为search:

<input type="search" class="signup-input text-value" name="" placeholder="e.g. example@url.com">

type="search"将在输入中添加一个x按钮，该按钮在单击时删除内容。

小提琴->http://jsfiddle.net/rnfp59jg/

现代浏览器对type="search"的支持，来自https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input：

Feature     Chrome  Firefox (Gecko) IE  Opera   Safari
type=search 5.0     4.0 (2.0)       10  11.01   (Yes)

一个好的跨浏览器选项是：

将您的输入放在div中，然后您就可以绝对地定位"x"。这样，您就可以控制浏览器渲染"X"的方式。

我还包括了一个渐变，以及事件处理程序本身：

$(document).ready(function() {
  $('.ex').click(function() {
    $('.signup-input').val("");
  });
});
.wrap input,
.wrap .ex {
  display: inline-block;
}
.wrap {
  position: relative;
  width: 50%;
  height: 30px;
}
.ex {
  position: absolute;
  right: 0;
  top: 10%;
  height: 30px;
  width: 30px;
  opacity: 0;
  font-size: 30px;
  line-height: 30px;
  transition: all 0.8s;
  border: 1px solid transparent;
  text-align: center;
}
input {
  width: 100%;
  height: 100%;
}
.wrap input:focus ~ .ex {
  opacity: 1;
}
.ex:hover {
  border-radius: 50%;
  background: tomato;
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <input type="text" id="this" class="signup-input text-value" name="" placeholder="e.g. example@url.com">
  <div class="ex">&times;</div>
</div>

就像下面给出的代码一样，你可以使用它。它适用于所有浏览器

HTML:

<span class="surround">
    <span class="tagsh"> Name </span>
</span>

JQuery:

var clearIcon ='<span id="icon_clear">X</span>';
$('<input type="input" class="textbox"/>'+clearIcon).appendTo('.surround')
    .keyup(
       function(e){
           var $dad = $($(this).parent());
           $(this).val().length>0?
               $('#icon_clear').fadeIn(300).click(function() {
                   $('.textbox').val('');}):
                   $('#icon_clear').fadeOut(300);
           if (e.keyCode in {13:"enter",32:"space"}){              
               var text = $(this).val(); 
               $('#icon_clear').remove();
               $dad.append($('<span class="tag"><span class="plus"></span><span class="minus"></span> '+text+'</span>'));
               $dad.append($(this).val("").hide().show("slow").focus());
               $dad.append(clearIcon);
           } ;});

CSS:

.textbox{
    width:70px;
    border:1px dotted #ccc;
    margin: 0 5px;
    padding-right:18px;
}
span#icon_clear{   
    display:none;
    cursor:pointer;
    color:#38468F;
    position:relative;
    right:21px;
}
span#icon_clear:hover{
    color:#ccc;
}

这里是JSFiddle链接：http://jsfiddle.net/ketan156/7PnKS/98/

<div class="search-wrp"><input type="text" class="signup-input text-value" name="" placeholder="e.g. example@url.com"><span class="close">x</span></div>

input{
    border: 0px;
    width: 100px;
}
.search-wrp{
    border: 1px solid #ccc;
    width: 120px;
}
.search-wrp span{
     color: blue;
     display: inline-block;
     margin-left: 5px;
     paddin: 3px;
     cursor: pointer;
}

JS代码

$(function(){
    $(".search-wrp .close").on("click",function(){
        $(".search-wrp input").val("");
    });
});

http://jsfiddle.net/bbw99eq8/2/

相关文章：