Wyczyść ikonę wewnątrz tekstu wejściowego

Czy istnieje szybki sposób na utworzenie wejściowego elementu tekstowego z ikoną po prawej stronie, aby wyczyścić sam element wejściowy (np. Pole wyszukiwania Google)?

Rozejrzałem się, ale znalazłem tylko sposób umieszczenia ikony jako tła elementu wejściowego. Czy istnieje wtyczka jQuery lub coś innego?

Chcę ikonę wewnątrz wejściowego elementu tekstowego, coś w stylu:

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

Dodaj type="search"do swoich danych
Wsparcie jest całkiem przyzwoite, ale nie będzie działać w IE <10

<input type="search">

Kasowalne dane wejściowe dla starych przeglądarek

Jeśli potrzebujesz pomocy IE9, oto kilka obejść

Używanie standardowego <input type="text">i niektórych elementów 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>

Używanie tylko <input class="clearable" type="text">(Bez dodatkowych elementów)

ustaw class="clearable"i graj z jego obrazem tła:

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

Demo jsBin

Sztuką jest ustawienie odpowiedniego dopełnienia (użyłem 18 pikseli) inputi przesunięcie obrazu tła w prawo, poza zasięgiem wzroku (użyłem right -10px center).
Wypełnienie 18px zapobiegnie ukryciu tekstu pod ikoną (gdy jest widoczny).
jQ doda klasę x(jeśli inputma wartość) pokazującą ikonę usuwania.
Teraz wystarczy namierzyć za pomocą jQ dane wejściowe za pomocą klasy xi wykryć, mousemoveczy mysz znajduje się w tym obszarze „x” o wielkości 18 pikseli; jeśli jest w środku, dodaj klasę onX.
Kliknięcie onXklasy usuwa wszystkie klasy, resetuje wartość wejściową i ukrywa ikonę.

7x7px gif:

Ciąg Base64:

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

Czy mogę zasugerować, jeśli nie masz nic przeciwko ograniczeniu przeglądarki do html 5, po prostu używając:

<input type="search" />

Demo JS Fiddle

Trzeba przyznać, że w Chromium (Ubuntu 11.04) wymaga to umieszczenia tekstu wewnątrz inputelementu, zanim pojawi się obraz / funkcja czystego tekstu.

Odniesienie:

• Zanurz się w HTML 5: forma szaleństwa .
• typ wejścia = szukaj - pole wyszukiwania (NOWOŚĆ) HTML5 .

Możesz użyć przycisku resetowania z obrazem ...

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

Zobacz to w akcji tutaj: http://jsbin.com/uloli3/63

Stworzyłem możliwe do wyczyszczenia pole tekstowe w samym CSS. Nie wymaga kodu javascript, aby działał

poniżej znajduje się link do wersji demo

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

Według MDN , <input type="search" />jest obecnie dostępna we wszystkich nowoczesnych przeglądarek:

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

Jeśli jednak chcesz mieć różne zachowanie spójne w różnych przeglądarkach, oto kilka lekkich alternatyw, które wymagają tylko JavaScript:

Opcja 1 - Zawsze wyświetlaj „x”: (przykład tutaj)

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>

Opcja 2 - Wyświetlaj „x” tylko podczas najechania kursorem na pole: (przykład tutaj)

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>

Opcja 3 - wyświetlaj „x” tylko, jeśli inputelement ma wartość: (przykład tutaj)

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>

Ponieważ żadne z latających rozwiązań nie spełniało naszych wymagań, opracowaliśmy prostą wtyczkę jQuery o nazwie jQuery-ClearSearch -

korzystanie z niego jest tak proste jak:

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

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

Przykład: http://jsfiddle.net/wldaunfr/FERw3/

EDYCJA: Znalazłem ten link. Mam nadzieję, że to pomoże. http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html

Wspomniałeś, że chcesz go po prawej stronie tekstu wejściowego. Najlepszym sposobem byłoby utworzenie obrazu obok pola wprowadzania. Jeśli szukasz czegoś w polu, możesz użyć obrazu tła, ale możesz nie być w stanie napisać skryptu, aby wyczyścić pole.

Tak więc wstaw i obrazuj i napisz kod JavaScript, aby wyczyścić pole tekstowe.

Jeśli chcesz, tak jak Google, powinieneś wiedzieć, że „X” tak naprawdę nie znajduje się wewnątrz <input>- są one obok siebie, a zewnętrzny pojemnik ma wygląd przypominający pole tekstowe.

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

Przykład: http://jsfiddle.net/VTvNX/

Coś takiego?? Jsfiddle Demo

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

Możesz to zrobić za pomocą tych poleceń (bez 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>

Oto wtyczka jQuery (i demo na końcu).

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

Zrobiłem to głównie w celu zilustrowania przykładu (i osobistego wyzwania). Chociaż opinie są mile widziane, inne odpowiedzi są dobrze rozdane na czas i zasługują na należyte uznanie.

Mimo to, moim zdaniem, jest to nadmiernie inżynieryjne wzdęcie (chyba że stanowi część biblioteki interfejsu użytkownika).

Napisałem prosty komponent używając jQuery i bootstrap. Spróbuj: https://github.com/mahpour/bootstrap-input-clear-button

Za pomocą wtyczki jquery dostosowałem ją do moich potrzeb, dodając niestandardowe opcje i tworząc nową wtyczkę. Można go znaleźć tutaj: https://github.com/david-dlc-cerezo/jquery-clearField

Przykład prostego użycia:

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

Uzyskanie czegoś takiego:

jQuery Mobile ma teraz wbudowane:

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

Dokumenty Jquery Mobile API TextInput

Nie trzeba dołączać plików CSS ani obrazów. Nie trzeba dołączać całej biblioteki jQuery interfejsu użytkownika ciężkiej artylerii. Napisałem lekką wtyczkę jQuery, która robi dla ciebie magię. Wszystko czego potrzebujesz to jQueryi wtyczki . =)

Fiddle tutaj: demo jQuery InputSearch .