How do you detect the clearing of a "search" HTML5 input?
JavascriptJqueryHtmlEventsDom EventsJavascript Problem Overview
In HTML5, the search input type appears with a little X on the right that will clear the textbox (at least in Chrome, maybe others). Is there a way to detect when this X is clicked in Javascript or jQuery other than, say, detecting when the box is clicked at all or doing some sort of location click-detecting (x-position/y-position)?
Javascript Solutions
Solution 1 - Javascript
Actually, there is a "search" event that is fired whenever the user searches, or when the user clicks the "x". This is especially useful because it understands the "incremental" attribute.
Now, having said that, I'm not sure if you can tell the difference between clicking the "x" and searching, unless you use an "onclick" hack. Either way, hopefully this helps.
Solution 2 - Javascript
Bind search-event the search box as given below-
$('input[type=search]').on('search', function () {
// search logic here
// this function will be executed on click of X (clear button)
});
Solution 3 - Javascript
I want to add a "late" answer, because I struggled with change, keyup and search today, and maybe what I found in the end may be useful for others too.
Basically, I have a search-as-type panel, and I just wanted to react properly to the press of the little X (under Chrome and Opera, FF does not implement it), and clear a content pane as a result.
I had this code:
$(some-input).keyup(function() {
// update panel
});
$(some-input).change(function() {
// update panel
});
$(some-input).on("search", function() {
// update panel
});
(They are separate because I wanted to check when and under which circumstances each was called).
It turns out that Chrome and Firefox react differently.
In particular, Firefox treats change as "every change to the input", while Chrome treats it as "when focus is lost AND the content is changed".
So, on Chrome the "update panel" function was called once, on FF twice for every keystroke (one in keyup, one in change)
Additionally, clearing the field with the small X (which is not present under FF) fired the search event under Chrome: no keyup, no change.
The conclusion? Use input instead:
$(some-input).on("input", function() {
// update panel
}
It works with the same behaviour under all the browsers I tested, reacting at every change in the input content (copy-paste with the mouse, autocompletion and "X" included).
Solution 4 - Javascript
Using Pauan's response, it's mostly possible. Ex.
<head>
<script type="text/javascript">
function OnSearch(input) {
if(input.value == "") {
alert("You either clicked the X or you searched for nothing.");
}
else {
alert("You searched for " + input.value);
}
}
</script>
</head>
<body>
Please specify the text you want to find and press ENTER!
<input type="search" name="search" onsearch="OnSearch(this)"/>
</body>
Solution 5 - Javascript
Easy - readable - and short solution
Wow, there are some really complicated answers in here for a really simple problem.
Simply add a listener for 'input' on your search input which will capture when the user types something in the input or clicks on the clear icon.
document.getElementById('searchInput').addEventListener('input', (e) => {
console.log(`Input value: "${e.currentTarget.value}"`);
})
<input id="searchInput" type="search" placeholder="Search" />
If you can't use ES6+ then here is the converted code for you:
document.getElementById('searchInput').addEventListener('input', function(e) {
// Yay! You make it in here when a user types or clicks the clear icon
})`
Solution 6 - Javascript
I know this is an old question, but I was looking for the similar thing. Determine when the 'X' was clicked to clear the search box. None of the answers here helped me at all. One was close but also affected when the user hit the 'enter' button, it would fire the same result as clicking the 'X'.
I found this answer on another post and it works perfect for me and only fires when the user clears the search box.
$("input").bind("mouseup", function(e){
var $input = $(this),
oldValue = $input.val();
if (oldValue == "") return;
// When this event is fired after clicking on the clear button
// the value is not cleared yet. We have to wait for it.
setTimeout(function(){
var newValue = $input.val();
if (newValue == ""){
// capture the clear
$input.trigger("cleared");
}
}, 1);
});
Solution 7 - Javascript
It made sense to me that clicking the X should count as a change event. I already had the onChange event all setup to do what I needed it to do. So for me, the fix was to simply do this jQuery line:
$('#search').click(function(){ $(this).change(); });
Solution 8 - Javascript
It doesn't seem like you can access this in browser. The search input is a Webkit HTML wrapper for the Cocoa NSSearchField. The cancel button seems to be contained within the browser client code with no external reference available from the wrapper.
Sources:
- http://weblogs.mozillazine.org/hyatt/archives/2004_07.html#005890
- http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#text-state-and-search-state
- http://dev.w3.org/html5/markup/input.search.html#input.search
Looks like you'll have to figure it out through mouse position on click with something like:
$('input[type=search]').bind('click', function(e) {
var $earch = $(this);
var offset = $earch.offset();
if (e.pageX > offset.left + $earch.width() - 16) { // X button 16px wide?
// your code here
}
});
Solution 9 - Javascript
Full Solution is here
This will clear search when search x is clicked. or will call the search api hit when user hit enter. this code can be further extended with additional esc keyup event matcher. but this should do it all.
document.getElementById("userSearch").addEventListener("search",
function(event){
if(event.type === "search"){
if(event.currentTarget.value !== ""){
hitSearchAjax(event.currentTarget.value);
}else {
clearSearchData();
}
}
});
Cheers.
Solution 10 - Javascript
Here's one way of achieving this. You need to add incremental attribute to your html or it won't work.
window.onload = function() {
var tf = document.getElementById('textField');
var button = document.getElementById('b');
button.disabled = true;
var onKeyChange = function textChange() {
button.disabled = (tf.value === "") ? true : false;
}
tf.addEventListener('keyup', onKeyChange);
tf.addEventListener('search', onKeyChange);
}
<input id="textField" type="search" placeholder="search" incremental="incremental">
<button id="b">Go!</button>
Solution 11 - Javascript
The original question is "Can I detect a click of the 'x'?".
This can be achieved by "sacrificing" Enter in the search event.
There are many events firing at different times in the lifecycle of an input box
of type search: input, change, search. Some of them overlap under certain circumstances. By default, "search" fires when you press Enter and when you press the 'x'; with the incremental attribute, it also fires when you add/remove any character, with a 500ms delay to capture multiple changes and avoid overwhelming the listener.
The trouble is, search generates an ambiguous event with input.value == "", because there are three ways it could have turned empty: (1) "the user pressed the 'x'", (2) "the user pressed Enter on an input with no text", or (3) "the user edited the input (Backspace, cut, etc) till the input became empty, and eventually incremental triggered the search event for the empty input".
The best way to disambiguate is to take Enter out of the equation, and have search fire only when the 'x' is pressed. You achieve that by suppressing the Enter keypress altogether. I know it sounds silly, but you can get the Enter behavior back under better controlled circumstances via the keydown event (where you'd do the suppressing too), the input event or the change event. The only thing that is unique to search is the 'x' click.
This removes the ambiguity if you don't use incremental. If you use incremental, the thing is, you can achieve most of the incremental behavior with the input event (you'd just need to re-implement the 500ms debouncing logic). So, if you can drop incremental (or optionally simulate it with input), this question is answered by a combination of search and keydown with event.preventDefault(). If you can't drop incremental, you'll continue to have some of the ambiguity described above.
Here's a code snippet demonstrating this:
inpEl = document.getElementById("inp");
monitor = document.getElementById("monitor");
function print(msg) {
monitor.value += msg + "\n";
}
function searchEventCb(ev) {
print(`You clicked the 'x'. Input value: "${ev.target.value}"`);
}
function keydownEventCb(ev) {
if(ev.key == "Enter") {
print(`Enter pressed, input value: "${ev.target.value}"`);
ev.preventDefault();
}
}
inpEl.addEventListener("search", searchEventCb, true);
inpEl.addEventListener("keydown", keydownEventCb, true);
<input type="search" id="inp" placeholder="Type something">
<textarea id="monitor" rows="10" cols="50">
</textarea>
In this simple snippet, you've turned search into a dedicated event that fires only when you press 'x', and that answers the question originally posted. You track input.value with the keydown for Enter.
Personally, I prefer to put an ev.target.blur() when pressing the Enter key (simulating a loss of focus for the input box), and monitor the change event to track the input.value (instead of monitoring input.value via keydown). In this way you can uniformly track input.value on focus changes, which can be useful. It works for me because I need to process the event only if the input.value has actually changed, but it might not work for everybody.
Here's the snippet with the blur() behavior (now you'll get a message even if you manually focus away from the input box, but remember, expect to see a change message only if a change actually happened):
inpEl = document.getElementById("inp");
monitor = document.getElementById("monitor");
function print(msg) {
monitor.value += msg + "\n";
}
function searchEventCb(ev) {
print(`You clicked the 'x'. Input value: "${ev.target.value}"`);
}
function changeEventCb(ev) {
print(`Change fired, input value: "${ev.target.value}"`);
}
function keydownEventCb(ev) {
if(ev.key == "Enter") {
ev.target.blur();
ev.preventDefault();
}
}
inpEl.addEventListener("search", searchEventCb, true);
inpEl.addEventListener("change", changeEventCb, true);
inpEl.addEventListener("keydown", keydownEventCb, true);
<input type="search" id="inp" placeholder="Type something">
<textarea id="monitor" rows="10" cols="50">
</textarea>
Solution 12 - Javascript
At least in Chrome, it seems that the "X" button of the search input emits a different kind of event.
It is also stated on MDN that an InputEvent or Event can be emitted: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
Test below. You will see that text inputs will be an InputEvent with a "data" property containing the character inputted, and that X button clicks will emit an Event type.
document.querySelector('input[type=search]').addEventListener('input', ev => console.log(ev))
Therefore, it should be possible to distinguish using:
if (ev instanceof InputEvent) { ... }
Solution 13 - Javascript
Found this post and I realize it's a bit old, but I think I might have an answer. This handles the click on the cross, backspacing and hitting the ESC key. I am sure it could probably be written better - I'm still relatively new to javascript. Here is what I ended up doing - I am using jQuery (v1.6.4):
var searchVal = ""; //create a global var to capture the value in the search box, for comparison later
$(document).ready(function() {
$("input[type=search]").keyup(function(e) {
if (e.which == 27) { // catch ESC key and clear input
$(this).val('');
}
if (($(this).val() === "" && searchVal != "") || e.which == 27) {
// do something
searchVal = "";
}
searchVal = $(this).val();
});
$("input[type=search]").click(function() {
if ($(this).val() != filterVal) {
// do something
searchVal = "";
}
});
});
Solution 14 - Javascript
The search or onclick works... but the issue I found was with the older browsers - the search fails. Lots of plugins (jquery ui autocomplete or fancytree filter) have blur and focus handlers. Adding this to an autocomplete input box worked for me(used this.value == "" because it was faster to evaluate). The blur then focus kept the cursor in the box when you hit the little 'x'.
The PropertyChange and input worked for both IE 10 and IE 8 as well as other browsers:
$("#INPUTID").on("propertychange input", function(e) {
if (this.value == "") $(this).blur().focus();
});
For FancyTree filter extension, you can use a reset button and force it's click event as follows:
var TheFancyTree = $("#FancyTreeID").fancytree("getTree");
$("input[name=FT_FilterINPUT]").on("propertychange input", function (e) {
var n,
leavesOnly = false,
match = $(this).val();
// check for the escape key or empty filter
if (e && e.which === $.ui.keyCode.ESCAPE || $.trim(match) === "") {
$("button#btnResetSearch").click();
return;
}
n = SiteNavTree.filterNodes(function (node) {
return MatchContainsAll(CleanDiacriticsString(node.title.toLowerCase()), match);
}, leavesOnly);
$("button#btnResetSearch").attr("disabled", false);
$("span#SiteNavMatches").text("(" + n + " matches)");
}).focus();
// handle the reset and check for empty filter field...
// set the value to trigger the change
$("button#btnResetSearch").click(function (e) {
if ($("input[name=FT_FilterINPUT]").val() != "")
$("input[name=FT_FilterINPUT]").val("");
$("span#SiteNavMatches").text("");
SiteNavTree.clearFilter();
}).attr("disabled", true);
Should be able to adapt this for most uses.
Solution 15 - Javascript
try this, hope help you
$("input[name=search-mini]").on("search", function() {
//do something for search
});
Solution 16 - Javascript
I believe this is the only answer that fires ONLY when the x is clicked.
However, it is a bit hacky and ggutenberg's answer will work for most people.
$('#search-field').on('click', function(){
$('#search-field').on('search', function(){
if(!this.value){
console.log("clicked x");
// Put code you want to run on clear here
}
});
setTimeout(function() {
$('#search-field').off('search');
}, 1);
});
Where '#search-field' is the jQuery selector for your input. Use 'input[type=search]' to select all search inputs. Works by checking for a search event (Pauan's answer) immediately after a click on the field.
Solution 17 - Javascript
based on event-loop of js, the click on clear button will trigger search event on input, so below code will work as expected:
input.onclick = function(e){
this._cleared = true
setTimeout(()=>{
this._cleared = false
})
}
input.onsearch = function(e){
if(this._cleared) {
console.log('clear button clicked!')
}
}
The above code, onclick event booked a this._cleared = false event loop, but the event will always run after the onsearch event, so you can stably check the this._cleared status to determine whether user just clicked on X button and then triggered a onsearch event.
This can work on almost all conditions, pasted text, has incremental attribute, ENTER/ESC key press etc.
Solution 18 - Javascript
document.querySelectorAll('input[type=search]').forEach(function (input) {
input.addEventListener('mouseup', function (e) {
if (input.value.length > 0) {
setTimeout(function () {
if (input.value.length === 0) {
//do reset action here
}
}, 5);
}
});
}
ECMASCRIPT 2016
Solution 19 - Javascript
You can also handle with generic way by binding onInput event as below
<input type="search" oninput="myFunction()">
Solution 20 - Javascript
My solution is based on the onclick event, where I check the value of the input (make sure that it's not empty) on the exact time the event fires and then wait for 1 millisecond and check the value again; if it's empty then it means that the clear button have been clicked not just the input field.
Here's an example using a Vue function:
HTML
<input
id="searchBar"
class="form-input col-span-4"
type="search"
placeholder="Search..."
@click="clearFilter($event)"
/>
JS
clearFilter: function ($event) {
if (event.target.value !== "") {
setTimeout(function () {
if (document.getElementById("searchBar").value === "")
console.log("Clear button is clicked!");
}, 1);
}
console.log("Search bar is clicked but not the clear button.");
},
Solution 21 - Javascript
Looks like there isn't a good answer to this so I thought I would add another possible solution.
// Get the width of the input search field
const inputWidth = $event.path[0].clientWidth;
// If the input has content and the click is within 17px of the end of the search you must have clicked the cross
if ($event.target.value.length && ($event.offsetX < inputWidth && $event.offsetX > inputWidth - 17)) {
this.tableRows = [...this.temp_rows];
}
Update
const searchElement = document.querySelector('.searchField');
searchElement.addEventListener('click', event => {
// Get the width of the input search field
const inputWidth = $event.path[0].clientWidth;
// If the input has content and the click is within 17px of the end of the search you must have clicked the cross
if ($event.target.value.length && ($event.offsetX < inputWidth && $event.offsetX > inputWidth - 17)) {
this.tableRows = [...this.temp_rows];
}
});
Solution 22 - Javascript
In my case I didn't want to use JQuery and my input was also generic so in some instances it could be of type 'search' but not always. I was able to get it working with a little delay based off one of the other answers in here. Basically I wanted to open a component when the input was clicked but not if the clear button was clicked.
function onClick(e: React.MouseEvent<HTMLInputElement>) {
const target = e.currentTarget;
const oldValue = target.value;
setTimeout(() => {
const newValue = target.value;
if (oldValue && !newValue) {
// Clear was clicked so do something here on clear
return;
}
// Was a regular click so do something here
}, 50);
};
Solution 23 - Javascript
const inputElement = document.getElementById("input");
let inputValue;
let isSearchCleared = false;
inputElement.addEventListener("input", function (event) {
if (!event.target.value && inputValue) {
//Search is cleared
isSearchCleared = true;
} else {
isSearchCleared = false;
}
inputValue = event.target.value;
});
Solution 24 - Javascript
On click of TextField cross button(X) onmousemove() gets fired, we can use this event to call any function.
<input type="search" class="actInput" id="ruleContact" onkeyup="ruleAdvanceSearch()" placeholder="Search..." onmousemove="ruleAdvanceSearch()"/>