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

Есть ли быстрый способ создать элемент ввода текста со значком справа, чтобы очистить сам элемент ввода (например, окно поиска 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

Хитрость заключается в том, чтобы установить правый отступ (я использовал 18px) inputи выдвинуть фоновое изображение вправо, вне поля зрения (я использовал right -10px center).
Это отступ 18px предотвратит скрытие текста под значком (пока он виден).
jQ добавит класс x(если inputимеет значение), показывающий значок очистки.
Теперь все, что нам нужно, это нацелить jQ на входы с классом xи определить, находится mousemoveли мышь внутри этой области «x» размером 18px; если внутри, добавьте класс onX.
Нажатие на onXкласс удаляет все классы, сбрасывает входное значение и скрывает значок.

7x7px gif:

Строка Base64:

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

Могу ли я предложить, если вы согласны с ограничением браузеров, совместимых с HTML 5, просто с помощью:

<input type="search" />

JS Fiddle demo

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

Ссылка:

• Погрузитесь в HTML 5: форма безумия .
• тип ввода = поиск - поле поиска (NEW) 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 - Всегда отображать «х»: (пример здесь)

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 - Отображать только «х» при наведении на поле: (пример здесь)

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/

РЕДАКТИРОВАТЬ: Я нашел эту ссылку. Надеюсь, поможет.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 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>

Вы можете сделать с помощью этих команд (без 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 и начальной загрузки. Попробуйте: 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">

Документы JQuery Mobile API TextInput

Не нужно включать CSS или файлы изображений. Нет необходимости включать всю библиотеку jQuery UI для тяжелой артиллерии. Я написал легкий плагин JQuery, который делает волшебство для вас. Все, что вам нужно, это jQueryи плагин . знак равно

Скрипка здесь: демонстрация jQuery InputSearch .