Xóa biểu tượng bên trong văn bản đầu vào

Có cách nào nhanh chóng để tạo một phần tử văn bản đầu vào với một biểu tượng ở bên phải để xóa chính phần tử đầu vào (như hộp tìm kiếm google) không?

Tôi nhìn xung quanh nhưng tôi chỉ tìm thấy làm thế nào để đặt một biểu tượng làm nền của yếu tố đầu vào. Có một plugin jQuery hay cái gì khác không?

Tôi muốn biểu tượng bên trong thành phần văn bản đầu vào, đại loại như:

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

Thêm một type="search"vào đầu vào của bạn
Hỗ trợ khá tốt nhưng sẽ không hoạt động trong IE <10

<input type="search">

Đầu vào có thể chấp nhận được cho các trình duyệt cũ

Nếu bạn cần hỗ trợ IE9, đây là một số cách giải quyết

Sử dụng một tiêu chuẩn <input type="text">và một số yếu tố 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>

Chỉ sử dụng một <input class="clearable" type="text">(Không có yếu tố bổ sung)

thiết lập class="clearable"và chơi với hình nền của nó:

/**
 * 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>

bản demo jsBin

Mẹo nhỏ là đặt một số phần đệm bên phải (tôi đã sử dụng 18px) sang inputvà đẩy hình nền bên phải, khuất tầm nhìn (tôi đã sử dụng right -10px center).
Phần đệm 18px đó sẽ ngăn văn bản ẩn bên dưới biểu tượng (trong khi hiển thị).
jQ sẽ thêm lớp x(nếu inputcó giá trị) hiển thị biểu tượng rõ ràng.
Bây giờ tất cả những gì chúng ta cần là nhắm mục tiêu với jQ các đầu vào với lớp xvà phát hiện mousemovexem chuột có ở trong khu vực "x" 18px đó không; nếu bên trong, thêm lớp onX.
Nhấp vào onXlớp sẽ xóa tất cả các lớp, đặt lại giá trị đầu vào và ẩn biểu tượng.

7x7px gif:

Chuỗi Base64:

data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=

Tôi có thể đề xuất, nếu bạn ổn với việc này bị giới hạn ở các trình duyệt tuân thủ html 5, chỉ cần sử dụng:

<input type="search" />

Bản demo của Fiddle

Phải thừa nhận rằng, trong Chromium (Ubuntu 11.04), điều này không yêu cầu phải có văn bản bên trong inputphần tử trước khi hình ảnh / chức năng văn bản rõ ràng sẽ xuất hiện.

Tài liệu tham khảo:

• Đi sâu vào HTML 5: Một dạng của sự điên rồ .
• kiểu nhập = tìm kiếm - trường tìm kiếm (MỚI) HTML5 .

Bạn có thể sử dụng nút đặt lại được tạo kiểu bằng hình ảnh ...

<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>

Xem nó trong hành động ở đây: http://jsbin.com/uloli3/63

Tôi đã tạo một hộp văn bản có thể xóa được chỉ bằng CSS. Nó không yêu cầu mã javascript để làm cho nó hoạt động

dưới đây là liên kết demo

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

Theo MDN , <input type="search" />hiện được hỗ trợ trong tất cả các trình duyệt hiện đại:

<input type="search" value="Clear this." />

Tuy nhiên, nếu bạn muốn các hành vi khác nhau nhất quán trên các trình duyệt thì đây là một số lựa chọn thay thế nhẹ chỉ yêu cầu JavaScript:

Tùy chọn 1 - Luôn hiển thị 'x': (ví dụ tại đây)

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>

Tùy chọn 2 - Chỉ hiển thị 'x' khi di chuột qua trường: (ví dụ ở đây)

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>

Tùy chọn 3 - Chỉ hiển thị 'x' nếu inputphần tử có giá trị: (ví dụ ở đây)

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>

Vì không có giải pháp nào bay xung quanh thực sự đáp ứng yêu cầu của chúng tôi, chúng tôi đã tìm ra một plugin jQuery đơn giản có tên jQuery-ClearSearch -

sử dụng nó dễ dàng như:

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

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

Ví dụ: http://jsfiddle.net/wldaunfr/FERw3/

EDIT: Tôi tìm thấy liên kết này. Hy vọng nó giúp. http://viruspatel.net/bloss/2011/02/cleaabilities-textbox-jquery.html

Bạn đã đề cập bạn muốn nó ở bên phải của văn bản đầu vào. Vì vậy, cách tốt nhất sẽ là tạo một hình ảnh bên cạnh hộp nhập liệu. Nếu bạn đang tìm kiếm thứ gì đó bên trong hộp, bạn có thể sử dụng hình nền nhưng bạn không thể viết một tập lệnh để xóa hộp.

Vì vậy, chèn và hình ảnh và viết mã JavaScript để xóa hộp văn bản.

Nếu bạn muốn nó giống như Google, thì bạn nên biết rằng "X" không thực sự nằm trong <input> - chúng nằm cạnh nhau với hộp chứa bên ngoài được tạo kiểu giống như hộp văn bản.

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;
}

Ví dụ: http://jsfiddle.net/VTvNX/

Một cái gì đó như thế này ?? Bản thử nghiệm của 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>

<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>

Bạn có thể làm với các lệnh này (không có 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>

Đây là một plugin jQuery (và một bản demo ở cuối).

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

Tôi đã làm nó chủ yếu để minh họa một ví dụ (và một thách thức cá nhân). Mặc dù upvote được chào đón, các câu trả lời khác được đưa ra đúng thời gian và xứng đáng được công nhận.

Tuy nhiên, theo tôi, đó là sự phình to quá mức (trừ khi nó là một phần của thư viện UI).

Tôi đã viết một thành phần đơn giản bằng cách sử dụng jQuery và bootstrap. Hãy dùng thử: https://github.com/mahpour/bootstrap-input-clear-button

Sử dụng một plugin jquery tôi đã điều chỉnh nó theo nhu cầu của mình để thêm các tùy chọn tùy chỉnh và tạo một plugin mới. Bạn có thể tìm thấy nó ở đây: https://github.com/david-dlc-cerezo/jquery-clearField

Một ví dụ về cách sử dụng đơn giản:

<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>

Có được một cái gì đó như thế này:

jQuery Mobile hiện đã tích hợp sẵn tính năng này:

<input type="text" name="clear" id="clear-demo" value="" data-clear-btn="true">

Tài liệu TextInput của Jquery Mobile

Không cần bao gồm các tệp CSS hoặc hình ảnh. Không cần bao gồm toàn bộ thư viện UI UI pháo hạng nặng đó. Tôi đã viết một plugin jQuery nhẹ, điều kỳ diệu cho bạn. Tất cả bạn cần là jQueryvà các plugin . =)

Fiddle ở đây: jQuery InputSearch demo .