Как поместить кнопку "Очистить" в поле ввода текста HTML, как это делает iPhone?

в настоящее время с HTML5, это довольно просто:

<input type="search" placeholder="Search..."/>

большинство современных браузеров будут автоматически отображать полезную кнопку Очистить в поле по умолчанию.

(если вы используете Bootstrap, вам нужно будет добавить переопределение в файл css, чтобы он показался)

input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

браузеры Safari/WebKit также могут предоставлять дополнительные функции при использовании type="search", как results=5 и autosave="...", но они также переопределяют многие из ваших стилей (например, высота, границы) . Чтобы предотвратить эти переопределения, сохраняя при этом функциональность, такую как кнопка X, вы можете добавить это в свой css:

input[type=search] {
    -webkit-appearance: none;
}

см.css-tricks.com для получения дополнительной информации о функциях, предоставляемых type="search".

HTML5 вводит тип ввода "поиск", который, как я считаю, делает то, что вы хотите.

<input type="search" />

здесь видео.

проверить наш jQuery-ClearSearch плагин. Это настраиваемый плагин jQuery-адаптация его к вашим потребностям путем стилизации поля ввода проста. Просто используйте его следующим образом:

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

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

​ Пример: http://jsfiddle.net/wldaunfr/FERw3/

вы не можете поместить его в текстовое поле, к сожалению, только сделать его похожим на его внутри, что, к сожалению, означает, что некоторые css необходимы :P

теория обертывает вход в div, снимает все границы и фоны с входа, а затем стилизует div, чтобы выглядеть как коробка. Затем, в кнопку после поле ввода код и работу он хорош.

Как только вы получите его, чтобы работать в любом случае ;)

у меня есть творческое решение, я думаю, что вы ищете

$('#clear').click(function() {
  $('#input-outer input').val('');
});

body {
  font-family: "Tahoma";
}
#input-outer {
  height: 2em;
  width: 15em;
  border: 1px #e7e7e7 solid;
  border-radius: 20px;
}
#input-outer input {
  height: 2em;
  width: 80%;
  border: 0px;
  outline: none;
  margin: 0 0 0 10px;
  border-radius: 20px;
  color: #666;
}
#clear {
  position: relative;
  float: right;
  height: 20px;
  width: 20px;
  top: 5px;
  right: 5px;
  border-radius: 20px;
  background: #f1f1f1;
  color: white;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}
#clear:hover {
  background: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-outer">
  <input type="text">
  <div id="clear">
    X
  </div>
</div>

https://jsfiddle.net/qdesign/xn9eogmx/1/

@Mahmoud Ali Kaseem

Я только что изменил некоторые CSS, чтобы он выглядел по-другому и добавил фокус ();

https://jsfiddle.net/xn9eogmx/81/

$('#clear').click(function() {
  $('#input-outer input').val('');
  $('#input-outer input').focus();
});

body {
  font-family: "Arial";
  font-size: 14px;
}
#input-outer {
  height: 2em;
  width: 15em;
  border: 1px #777 solid;
  position: relative;
  padding: 0px;
  border-radius: 4px;
}
#input-outer input {
  height: 100%;
  width: 100%;
  border: 0px;
  outline: none;
  margin: 0 0 0 0px;
  color: #666;
  box-sizing: border-box;
  padding: 5px;
  padding-right: 35px;
  border-radius: 4px;
}
#clear {
  position: absolute;
  float: right;
  height: 2em;
  width: 2em;
  top: 0px;
  right: 0px;
  background: #aaa;
  color: white;
  text-align: center;
  cursor: pointer;
  border-radius: 0px 4px 4px 0px;
}
#clear:after {
  content: "4c";
  position: absolute;
  top: 4px;
  right: 7px;
}
#clear:hover,
#clear:focus {
  background: #888;
}
#clear:active {
  background: #666;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-outer">
  <input type="text">
  <div id="clear"></div>
</div>

конечно, лучший подход заключается в использовании все более-поддержала <input type="search" />.

во всяком случае, для немного удовольствия от кодирования я думал, что это может быть достигнуто также с помощью кнопки сброса формы, и это рабочий результат (это worths notings, которые не могут жить другие входы, но поле поиска с этим подходом, или кнопка сброса будет стирать их тоже), не требуется javascript:

form > div{
    position: relative;
    width: 200px;
}

form [type="text"] {
    width: 100%;
    padding-right: 20px;
}

form [type="reset"] {
    position: absolute;
    border: none;
    display: block;
    width: 16px;
    border-radius: 20px;
    top: 2px;
    bottom: 2px;
    right: -20px;
    background-color: #ddd;
    padding: 0px;
    margin: 0px;
}

<form>
	<div>
		<input type="text" />
		<input type="reset" value="X" />
	</div>
</form>