Я хочу иметь симпатичный маленький значок, который при нажатии очищает текст в поле <INPUT>.
Это сделано для экономии места, а не для наличия четкой ссылки за пределами поля ввода.
Мои навыки CSS слабые ... Вот скриншот того, как выглядит iPhone.
Как мне поместить четкую кнопку в поле ввода текста HTML, как это делает iPhone?
Ответы:
@thebluefox подвел итог больше всего. Вы также вынуждены использовать JavaScript, чтобы эта кнопка работала в любом случае. Вот SSCCE, вы можете копировать и запускать его:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 2803532</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('input.deletable').wrap('<span class="deleteicon" />').after($('<span/>').click(function() {
$(this).prev('input').val('').trigger('change').focus();
}));
});
</script>
<style>
span.deleteicon {
position: relative;
}
span.deleteicon span {
position: absolute;
display: block;
top: 5px;
right: 0px;
width: 16px;
height: 16px;
background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px;
cursor: pointer;
}
span.deleteicon input {
padding-right: 16px;
box-sizing: border-box;
}
</style>
</head>
<body>
<input type="text" class="deletable">
</body>
</html>jQuery , кстати, не нужен, он просто отлично отделяет логику, необходимую для прогрессивного улучшения, от источника, вы, конечно, также можете использовать простой HTML / CSS / JS:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 2803532, with "plain" HTML/CSS/JS</title>
<style>
span.deleteicon {
position: relative;
}
span.deleteicon span {
position: absolute;
display: block;
top: 5px;
right: 0px;
width: 16px;
height: 16px;
background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px;
cursor: pointer;
}
span.deleteicon input {
padding-right: 16px;
box-sizing: border-box;
}
</style>
</head>
<body>
<span class="deleteicon">
<input type="text">
<span onclick="var input = this.previousSibling; input.value = ''; input.focus();"></span>
</span>
</body>
</html>Вы получаете только уродливый HTML (и JS, не совместимый с кроссбраузерными приложениями;)).
Обратите внимание, что если внешний вид пользовательского интерфейса не является вашей самой большой проблемой, а его функциональность вызывает беспокойство, просто используйте <input type="search">вместо <input type="text">. Он покажет кнопку очистки (для конкретного браузера) в браузерах с поддержкой HTML5.
7
можно ли скрыть кнопку очистки, когда текстовое поле пусто?
—
root
В IE9 текст плавает под крестиком.
—
sedovav
после изменения темы URL-адрес изображения больше не является правильным. к старому изображению можно получить доступ по адресу web.archive.org/web/20150101025546/http://cdn.sstatic.net/…
—
zacaj
Вы также можете использовать значки с
—
отличным
class="fa fa-remove"
Я использовал чистую версию Javascript, и она работала хорошо, за исключением центрирования кнопки в Win / Linux Firefox / Chrome. Я решил это, удалив
—
thomasa88
top:дочерний диапазон и установив display: flex; align-items: center;в родительском диапазоне.
В настоящее время с 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".
Отличный ответ, без кода. К сожалению, не поддерживается многими браузерами .. Неважно, это была бы дополнительная функция Chrome в моем продукте :)
—
guillaumepotier
HTML5 вводит тип ввода «поиск», который, я считаю, делает то, что вы хотите.
<input type="search" />
Вот живой пример .
Хотя тип «поиск» поддерживается всеми последними браузерами (проверьте поддержку здесь: wufoo.com/html5), кнопка очистки не отображается в Firefox (32.0.3) или Opera (12.17).
—
justanotherprogrammer
кнопка очистки также не отображается в последней
—
версии
Если вы используете Bootstrap, он может переопределить поведение по умолчанию
—
aexl
В связанном CodePen отсутствует закрывающая косая черта во входных данных, поэтому, если вы хотите увидеть, как он работает на CodePen, просто добавьте закрывающую косую черту.
—
Gen1-1,
@ Gen1-1 ой, похоже, общедоступные загрузки отключены blog.codepen.io/2019/08/06/anonymous-pen-save-option-removed, если у кого-то есть фиксированная ручка кода, пожалуйста, отредактируйте и помогите исправить demo
—
ThorSummoner
Ознакомьтесь с нашим плагином jQuery-ClearSearch . Это настраиваемый плагин jQuery - легко адаптировать его к вашим потребностям путем стилизации поля ввода. Просто используйте его следующим образом:
<input class="clearable" type="text" placeholder="search">
<script type="text/javascript">
$('.clearable').clearSearch();
</script>
Это круто, но я бы посоветовал добавить в "$ (window) .resize (function () {triggerBtn ()});" в jquery.clearsearch.js сразу после $ this.on ('keyup keydown change focus', triggerBtn); | Чтобы окна изменения размера не испортили положение креста
—
Нг Сек Лонг,
К сожалению, вы не можете поместить его в текстовое поле, только чтобы он выглядел так, как будто он внутри него, что, к сожалению, означает, что требуется некоторый 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>Конечно, лучший подход - использовать все более поддерживаемые <input type="search" /> .
В любом случае, для небольшого веселья с кодированием я подумал, что этого можно достичь также с помощью кнопки сброса формы, и это рабочий результат (стоит отметить, что при таком подходе нельзя использовать другие входные данные, кроме поля поиска, или кнопка сброса стирает их тоже), 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>Может быть, поможет это простое решение:
<input type="text" id="myInput" value="No War"/><button onclick="document.getElementById('myInput').value = ''" title="Clear">X</button></input>
Хотя этот код может предоставить решение проблемы OP, настоятельно рекомендуется предоставить дополнительный контекст относительно того, почему и / или как этот код отвечает на вопрос. Ответы только на код обычно становятся бесполезными в долгосрочной перспективе, потому что будущие зрители, столкнувшиеся с аналогичными проблемами, не могут понять причину решения.
—
Э. Зейтинчи,
@ Махмуд Али Касим
Я только что изменил CSS, чтобы он выглядел по-другому, и добавил focus ();
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: "\274c";
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>