Как сделать команду удалить содержимое по кнопке delete?

Question

[partyzanx]

Помогите, пожалуйста.
1. Нужно ввести команду, чтобы при нажатии кнопки delete удалялось содержимое input
2. Если есть опыт, нужно чтобы в конце инпута плавно появлялась кнопка "крестик", которая бы удаляла содержимое

Answer 1

[vasiiil]

Вставляете в div с классом search крестик с классом clear-input куда угодно, и тогда следующий код должен помочь

$(document).on('click', '.clear-input', function() {
	$(this).closest('.search').find('.input-class').val('');
});

И к инпуту надо добавить класс input-class.
Если див с классом search будет прямым родителем элемента с крестиком, то вместо closest() можно использовать parent()

Comments

[partyzanx]

vasiiil скажите, пожалуйста, как мне сделать, чтобы этот поиск раскрывался не когда по нему кликнут, а когда на него наведут курсор?

[vasiiil]

в css в последний блок добавьте .search input:hover + div svg

Answer 2

[Руслан Дорофеев]

Вот можете прям это в браузер вставить)

<style>
x-field{
display:inline;
position:relative;
}
x-field .close {
position:absolute;
padding:0 5px;
right:0;
}
</style>
<x-field>
<input type="text" id = "text">
<span class="close" onclick="this.previousElementSibling.value = ''">
&times;
</span>
</x-field>

Comments

[partyzanx]

Руслан Дорофеев скажите, пожалуйста, как мне сделать, чтобы этот поиск раскрывался не когда по нему кликнут, а когда на него наведут курсор?

[Руслан Дорофеев]

А как он должен раскрываться? У меня он не раскрывается. Вы имеете ввиду изменение размера или получение фокуса?

<style>
x-field{
display:inline;
position:relative;
}
x-field .close {
position:absolute;
padding:0 5px;
right:0;
}
#text:hover {
	border-color: red;
}
</style>
<x-field>
<input type="text" onmouseover="javascript:this.value='q'" id = "text">
<span class="close" onclick="this.previousElementSibling.value = ''">
&times;
</span>
</x-field>

[Руслан Дорофеев]

Если просто в установить фокус то вот

<style>
x-field{
display:inline;
position:relative;
}
x-field .close {
position:absolute;
padding:0 5px;
right:0;
}
</style>
<x-field>
<input type="text" onmouseover="javascript:this.focus();" id = "text">
<span class="close" onclick="this.previousElementSibling.value = ''">
&times;
</span>
</x-field>