Очистити значок всередині вхідного тексту

Чи є швидкий спосіб створити вхідний текстовий елемент із піктограмою праворуч, щоб очистити сам елемент введення (наприклад, поле пошуку Google)?

Я озирнувся, але знайшов лише те, як поставити значок як фон вхідного елемента. Чи є плагін jQuery чи щось інше?

Я хочу, щоб піктограма всередині елемента введення тексту була приблизно такою:

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

Додайте type="search"свій внесок
Підтримка є досить пристойною, але в IE <10 не працюватиме

<input type="search">

Очищення даних для старих браузерів

Якщо вам потрібна підтримка IE9, ось кілька вирішень

Використання стандартних <input type="text">та деяких елементів 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>

Використання лише <input class="clearable" type="text">(Без додаткових елементів)

встановити class="clearable"і грати з його фоновим зображенням:

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

демонстрація jsBin

Трюк полягає в тому, щоб встановити кілька правильних накладок (я використав 18 пікселів) до inputта натиснути фонове зображення праворуч, поза полем зору (я використовував right -10px center).
Ця накладка з 18 пікселів запобігає приховуванню тексту під піктограмою (поки видно).
jQ додасть клас x(якщо він inputмає значення), що відображатиме чітку піктограму.
Тепер все, що нам потрібно, - це націлити на jQ входи з класом xі виявити, mousemoveчи знаходиться миша в цій області 18 х "х"; якщо всередині, додайте клас onX.
Клацання onXкласом видаляє всі класи, скидає вхідне значення та приховує піктограму.

7x7px gif:

Base64 рядок:

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

Чи можу я підказати, якщо ви все гаразд обмежуєтесь браузерами, сумісними з html 5, просто використовуючи:

<input type="search" />

Демонстрація JS Fiddle

Щоправда, у Chromium (Ubuntu 11.04) для цього обов'язково повинен бути текст усередині inputелемента, перш ніж з'явиться чітко-текстове зображення / функціональність.

Довідка:

• Зануритися в HTML 5: Форма божевілля .
• тип вводу = пошук - поле пошуку (НОВЕ) HTML5 .

Ви можете використовувати кнопку скидання, стилізовану до зображення ...

<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

Я створив чітке текстове поле лише у CSS. Для його роботи не потрібен код JavaScript

нижче - демо-посилання

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

За даними MDN , <input type="search" />наразі підтримується у всіх сучасних браузерах:

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

Однак, якщо ви хочете, щоб інша поведінка відповідала веб-переглядачам, тут є кілька альтернатив, які потребують лише 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", якщо inputелемент має значення: (приклад тут)

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>

Оскільки жодне з рішень, що летять навколо, насправді не відповідало нашим вимогам, ми створили простий плагін jQuery під назвою jQuery-ClearSearch -

використовувати його так просто, як:

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

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

Приклад: http://jsfiddle.net/wldaunfr/FERw3/

EDIT: Я знайшов це посилання. Сподіваюся, це допомагає. http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html

Ви згадали, що хочете це праворуч від введеного тексту. Отже, найкращим способом було б створити зображення поруч із полем введення. Якщо ви шукаєте щось у полі, ви можете використовувати фонове зображення, але ви, можливо, не зможете написати сценарій, щоб очистити поле.

Отже, вставте та зображіть та напишіть код JavaScript, щоб очистити текстове поле.

Якщо ви хочете, як Google, то ви повинні знати, що "X" насправді не знаходиться всередині <input>- вони поруч один з одним зовнішнім контейнером, який виглядає як текстове поле.

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

Приклад: http://jsfiddle.net/VTvNX/

Щось на зразок цього?? Демо 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>

Ви можете робити з цими командами (без 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>

Ось плагін jQuery (і демонстрація в кінці).

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

Я зробив це здебільшого, щоб проілюструвати приклад (і особистий виклик). Незважаючи на те, що оновлення вітаються, інші відповіді добре роздаються вчасно і заслуговують належного визнання.

Все-таки, на мою думку, це надмірно інженерія (якщо вона не є частиною бібліотеки інтерфейсу).

Я написав простий компонент, використовуючи jQuery і bootstrap. Спробуйте: https://github.com/mahpour/bootstrap-input-clear-button

Використовуючи плагін jquery, я адаптував його до моїх потреб, додавши спеціальні параметри та створивши новий плагін. Ви можете знайти його тут: https://github.com/david-dlc-cerezo/jquery-clearField

Приклад простого використання:

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

Отримання чогось подібного:

jQuery Mobile має вбудований:

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

Документи JQery Mobile API TextInput

Не потрібно включати CSS або файли зображень. Не потрібно включати всю цю важко-артилерійську бібліотеку jQuery UI. Я написав легкий плагін jQuery, який робить для вас магію. Все, що вам потрібно, це jQueryі плагін . =)

Скрипку тут: JQuery InputSearch демо .