Есть ли быстрый способ создать элемент ввода текста со значком справа, чтобы очистить сам элемент ввода (например, окно поиска Google)?
Я посмотрел вокруг, но я только нашел, как поставить значок в качестве фона элемента ввода. Есть ли плагин JQuery или что-то еще?
Я хочу значок внутри элемента ввода текста, что-то вроде:
--------------------------------------------------
| X|
--------------------------------------------------
Добавьте type="search" на свой вход
Поддержка довольно приличная, но не работает в IE < 10
<input type="search">Могу ли я предложить, если вы согласны с ограничением браузеров, совместимых с HTML 5, просто с помощью:
<input type="search" />
Следует признать, что в Chromium (Ubuntu 11.04) для этого требуется, чтобы в элементе input был текст, прежде чем появится текстовое изображение/функциональность.
Ссылка:
Вы можете использовать кнопку reset, стилизованную с изображением...
<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, чтобы заставить его работать.
ниже показана демонстрационная ссылка
Согласно MDN, <input type="search" /> в настоящее время поддерживается во всех современных браузерах:
<input type="search" value="Clear this." />Поскольку ни одно из решений, летающих вокруг, не соответствовало нашим требованиям, мы придумали простой плагин jQuery под названием jQuery-ClearSearch -
используя его, просто:
<input class="clearable" type="text" placeholder="search">
<script type="text/javascript">
$('.clearable').clearSearch();
</script>
EDIT: Я нашел эту ссылку. Надеюсь, поможет. http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html
Вы упомянули, что хотите его справа от текста ввода. Таким образом, лучший способ - создать изображение рядом с полем ввода. Если вы ищете что-то внутри коробки, вы можете использовать фоновое изображение, но вы можете не написать script, чтобы снять флажок.
Итак, вставьте и создайте изображение и напишите код 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">✗</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>
Здесь плагин jQuery (и демо в конце).
Я сделал это в основном, чтобы проиллюстрировать пример (и личную задачу). Хотя приветствия приветствуются, другие ответы хорошо передаются вовремя и заслуживают должного признания.
Тем не менее, по-моему, это чрезмерно спроектированное раздувание (если оно не является частью библиотеки пользовательского интерфейса).
Я написал простой компонент, используя jQuery и bootstrap. Попробуйте: https://github.com/mahpour/bootstrap-input-clear-button
Не нужно включать CSS или файлы изображений. Нет необходимости включать всю эту библиотеку jQuery UI для тяжелой артиллерии. Я написал легкий плагин JQuery, который делает волшебство для вас. Все, что вам нужно, это jQuery и плагин. знак равно
Скрипка здесь: демонстрация jQuery InputSearch.
Используя плагин 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">
Вы можете сделать с помощью этих команд (без Bootstrap).
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 teal;
border-radius: 5px;
box-sizing: border-box;
}
span {
position: absolute;
top: 0;
right: 0;
margin: 8px 0;
padding: 13px 15px;
color: teal;
font-weight: bold;
cursor: pointer;
}<div>
<input placeholder="Prueba" />
<span>✖</span>
</div>