I have this form:
<form>
<label for="locationsearch">Location:</label>
<input type="search" id="locationsearch" name="locationsearch" />
</form>
I want to add an eventListener when I hit enter on the input(i.e. #locationsearch). I tried doing this:
const locationSearch = document.getElementById("locationsearch");
locationSearch.addEventListener("search", () => {
console.log("search entered");
});
and this:
const locationSearch = document.getElementById("locationsearch");
locationSearch.onsubmit = function () {
console.log("search entered");
};
Both are not console-logging.
What is the correct/better way to perform this action?
CodePudding user response:
The onsubmit event would happen on the form itself, not the input. So you could use an id on the form instead to target it directly.
const locationSearch = document.getElementById("locationsearch");
locationSearch.onsubmit = function () {
console.log("search entered");
};
<form id="locationsearch">
<label for="locationsearch">Location:</label>
<input type="search" name="locationsearch" />
</form>
CodePudding user response:
You could handle it keydown event handler of input element. And check the key code if Enter key pressed.
const locationSearch = document.getElementById("locationsearch");
locationSearch.addEventListener("keydown", (e) => {
if (e.code === 'Enter') {
// Do Something ? Search
}
});
CodePudding user response:
You can use keypress event for this.
const locationSearch = document.getElementById("locationsearch");
locationSearch.addEventListener("keypress", () => {
if (event.key === "Enter") {
event.preventDefault();
let inputVal = document.getElementById("locationsearch").value;
console.log("search entered " inputVal);
document.getElementById("locationsearch").value = "";
}
});
<form>
<label for="locationsearch">Location:</label>
<input type="search" id="locationsearch" name="locationsearch" />
</form>