Click on button while pressing Enter - javascript

I use for my current online store, the search of Algolia. I would like to extend this search with the function that when customers press the Enter key, the click on the button "Show all results" is triggered.
My problem is that I constantly get the error message (
index):TypeError: input.addEventListener is not a
function
in the devtools and I slowly do not know why. Anyone have an idea how I can trigger this click event?
HTML Input
<input class="ais-SearchBox-input" type="search" placeholder="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" maxlength="512">
HTML Button
<a class="search-query-route cta-button w-inline-block" id="milo" style="margin-top:-20px" href="">Alle Ergebnisse anzeigen</a>
Script
var input = document.getElementsByClassName(".");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("milo").click();
}
});

This is because addEventListener is a function on HTMLElement. since you are using the var input and input is the result of a getElementsByClassName call, you do not have an HTMLElement. you have an array of HTMLElements. Even if it is only one. You can fix this by putting an ID on the element (which is good practice anyway, and then using the GetElementByID function to set your var input.
var input = document.getElementById("myField");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("milo").click();
}
});
<input id="myField" class="ais-SearchBox-input" type="search" placeholder="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" maxlength="512">
<a class="search-query-route cta-button w-inline-block" id="milo" style="margin-top:-20px" href="">Alle Ergebnisse anzeigen</a>

Add an ID attribute on the HTML input control so you can find it easily. So change
<input class="ais-SearchBox-input" type="search" placeholder="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" maxlength="512">
to
<input id="myspecialinput" class="ais-SearchBox-input" type="search" placeholder="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" maxlength="512">
Then change the code that wires up the event handler from
var input = document.getElementsByClassName(".");
to
var input = document.getElementById("myspecialinput");

You're missing your class name
Change this
var input = document.getElementsByClassName(".");
to this
var input = document.getElementsByClassName("ais-SearchBox-input")[0];

Related

Cold calling blur() function in JavaScript

I have a line
document.getElementById("firstName").addEventListener("blur", validateField);
and :
validateField = (event) =>
{
const el = event.target;
}
Now I want to call the validateField() function with the respective element in the form.addEventListener('submit', function(event) line.
document.getElementById("firstName").blur(); // This is not getting called.
But cold-calling blur() isn't working.
What I am trying to do is to populate the bootstrap is-invalid message when the form is called and still invalid.
el.classList.add('is-invalid');
el.nextElementSibling.innerHTML = "This field is required";
Trying to avoid jQuery as I may switch this over to bootstrap version 5.
I do think technically, submitting form unfocuses, unless the user presses the enter key to submit. An alternate approach is maybe, you can try to focus on something else than blurring a particular thing!
The following code works for me.
document.getElementById("frm").addEventListener('submit', function(event) {
event.preventDefault();
document.getElementById("firstName").blur();
});
<form action="" id="frm">
<input type="text" id="firstName" />
<input type="submit" value="Press Enter" />
</form>
But for the alternate solution:
document.getElementById("frm").addEventListener('submit', function(event) {
event.preventDefault();
document.getElementById("frm").focus();
});
#frm:focus {
outline: none;
box-shadow: none;
}
<form action="" id="frm" tabindex="0">
<input type="text" id="firstName" />
<input type="submit" value="Press Enter" />
</form>

Replacing input special characters with onChange

I'm trying to replace this " with ׳׳ and also this ' with ׳ but it wont work.
function replaceName(e) {
e.value = e.value.replace(/'/g, '׳');
e.value = e.value.replace(/"/g, "׳׳");
}
<input class="form-control" name="name" type="text" onChange="replaceName(this)" />
Better to use oninput than onchange if you want to see changes as user types. onchange is fired when input loses focus, oninput is fired for every input.
function replaceName(e) {
e.value = e.value.replace(/'/g, '׳');
e.value = e.value.replace(/"/g, "׳׳");
}
<input class="form-control" name="name" type="text" oninput="replaceName(this)" />

Javascript implement event onkeypress from another onkeypress event

I have 3 input elements. i want to use onkeyup event to get the value from the first input and copy it to the third input. But I still get an empty value in the third input when i typed in the first one. The function changethree() does not automatically get value from input second when user typed in input first. Please help me
<html>
<input type="text" id="satu" onkeyup="changetwo(this)" placeholder="input 1">
<br><br>
<input type="text" id="dua" onkeyup="changethree(this)" placeholder="input 2"><br><br>
<input type="text" id="tiga" placeholder="input 3">
<script>
function changetwo(a){
var target = document.getElementById('dua');
target.value = a.value;
}
function changethree(a){
var target = document.getElementById('tiga');
target.value = a.value;
}
</script>
</html>
changethree() only fires when the user types something into dua. If you want tiga to be updated when you type in satu you have to add to its keyup event:
<input type="text" id="satu" onkeyup="changetwo(this); changethree(this)" placeholder="input 1">

Update two fields with multiple lines in JavaScript

This is my js
$(function() {
var tryme = 5;
var options = {
source: "<?=base_url()?>/autocomplete/",
minLength: 1,
select: function( event, ui ) {
event.preventDefault();
this.value = ui.item.valuedesc;
//$(this).siblings('.item_sku').val(ui.item.valuedesc); // not working
//$(this).siblings('.description').val(ui.item.description); // not working
//$(this).siblings('.rate').val(ui.item.rate); // not working
}
};
$( ".item_sku" ).autocomplete(options);
$(".add-row").click(function (e) {
e.preventDefault();
var cloned = $('#invoice_table tr:last').clone();
cloned.appendTo('#invoice_table').find('input').val('');
cloned.find('.item_sku').autocomplete(options);
});
});
I am using jquery to clone a line of fields in order to build my invoice items.
What is NOT working now is the specific line of fields are not updating.
These are my fields:
<input type="text" maxlength="255" name="item_sku[]" data-required="1" class="form-control item_sku" autocomplete="off" required/>
<input type="text" maxlength="255" name="item_description[]" id="description" data-required="1" class="form-control calculate description" required/>
<input type="text" maxlength="255" name="item_amount[]" data-required="1" class="form-control calculate rate" autocomplete="off" required/>
So when I start typing int he ITEM_SKU field, I get my autocomplete options - which is working fine. And when I click on it, it must update the description and item_amount textfields.
Now if I change the field class to an ID, and the javascript to example
<input type="text" maxlength="255" name="item_amount[]" id="rate" data-required="1" class="form-control calculate" autocomplete="off" required/>
It works.
But because I have an "add more fields" button - I have to have multiple fields with the same ID.
How can I get the current line's fields updated with ui.item.description and ui.item.rate?
http://i.share.pho.to/7945c43f_o.jpeg
I would use a hidden div as a library for your cloned elements...
Also, remove the ID after the obj is cloned.
something like (untested)
$(".add-row").click(function (e) {
e.preventDefault();
var cloned = $('#hidden').find('#tr').clone().removeAttr('id');
cloned.appendTo('#invoice_table');
cloned.find('.item_sku').autocomplete(options);
});
Edit: Simplify jsfiddle example (tested) http://jsfiddle.net/c5ajonav/3/

How to force "enter key" to act as "tab key" using javascript?

I'm working on a site that is full of forms to be filled and I it's required that when escape button is pressed focus move to the next input control, just as pressing "tab" do.
I found code to move focus when keypressed is 13 but this need to take the ID of element to focus on
<input id="Text1" type="text" onkeydown="return noNumbers(event)" />
<input id="Text2" type="text" />
<script type="text/javascript">
function noNumbers(e) {
keynum = e.which;
if (keynum == 13)
document.getElementById("Text2").focus();
}
</script>
I need a generalized function that when key pressed code is 13 "that is enter" fire the default event of pressing 9 "that is tab", of course in Javascript
This will handle multiple input fields.
Here is the jQuery version:
http://jsfiddle.net/TnEB5/3/
$('input').keypress(function(e) {
if (e.which == 13) {
$(this).next('input').focus();
e.preventDefault();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="Text1" type="text" />
<input id="Text2" type="text" />
<input id="Text3" type="text" />
Here is the pure javascript version:
http://jsfiddle.net/TnEB5/5/
(you probably want to get the sibling differently)
function tab(e) {
if (e.which == 13) {
e.target.nextSibling.nextSibling.focus();
e.preventDefault();
}
}
var inputs = document.getElementsByTagName('input');
for (var x = 0; x < inputs.length; x++)
{
var input = inputs[x];
input.onkeypress = tab;
}
<input id="Text1" type="text" />
<input id="Text2" type="text" />
<input id="Text3" type="text" />
handle keypress instead and return false back to the browser:
http://jsfiddle.net/EeyTL/
<input id="Text1" type="text" />
<input id="Text2" type="text" />
<script type="text/javascript">
document.getElementById('Text1').onkeypress = function (e) {
if (e.which === 13) {
document.getElementById("Text2").focus();
return false;
}
};
</script>
You'll need to explicitly set the tabindex property of the input fields for a generic solution. Something like
<input id="Text1" type="text" tabindex="1" />
<input id="Text2" type="text" tabindex="2" />
<script type="text/javascript">
$('input').keypress(function(e){
if(e.which==13){
$("[tabindex='"+($(this).attr("tabindex")+1)+"']").focus();
e.preventDefault();
}
});
</script>
this solution uses jquery to assign the event handler for all input type elements on the page, sets focus to the element with the next highest tabindex property, and prevents the form from submitting when enter is pressed using e.preventDefault(). Here's a jfiddle
<input type="text" value="" onkeyup="doNext(this);"> a <br>
<input type="text" value="" onkeyup="doNext(this);"> b <br>
<input type="text" value="" onkeyup="doNext(this);"> c <br>
function doNext(el){
if(event.keyCode=='13'){
var nextEl = el.form.elements[el.tabIndex+1];
if (nextEl && nextEl.focus) nextEl.focus();
}
}
Althought the post is old, I hope my answer can help someone in need. I have a smilar situation:
I have a very large form for an employee scheduler application with different types of input fields. Some of the input fields are hidden sometimes and not other times. I was asked to make the enter key behave as the tab key so the users of the form could use the 10-key when creating thier employees schedule.
Here is how I solved my problem:
$(document).ready(function () {
var allInputs = $(':text:visible'); //(1)collection of all the inputs I want (not all the inputs on my form)
$(":text").on("keydown", function () {//(2)When an input field detects a keydown event
if (event.keyCode == 13) {
event.preventDefault();
var nextInput = allInputs.get(allInputs.index(this) + 1);//(3)The next input in my collection of all inputs
if (nextInput) {
nextInput.focus(); //(4)focus that next input if the input is not null
}
}
});
});
What I had to do was:
Create a collection of all the inputs I want to consider when tabbing. in my case it is text inputs that are visible.
Listen for a keydown event on the inputs in question, in my case all text field inputs
When the enter is pressed on my text input, determine what input is next to be focused.
If that input is valid, bring it into focus.
I am using this code for advancing to next input field. I hate to press TAB key. And this solution works in IE & Firefox:
<script type="text/javascript">
function tabE(obj,e){
var e=(typeof event!='undefined')?window.event:e;// IE : Moz
if(e.keyCode==13){
var ele = document.forms[0].elements;
for(var i=0;i<ele.length;i++){
var q=(i==ele.length-1)?0:i+1;// if last element : if any other
if(obj==ele[i]){ele[q].focus();break}
}
return false;
}
}
</script>
HTML Content
<form id="main">
<input name="" type="text" onkeypress="return tabE(this,event)">
<input type="submit" value="Ok">
</form>
Here is a easy solution for you.
Basically you include the enter2tab.js file and then add the enter2tab class on each object where you want enter to be treated as js.
https://github.com/AndreasGrip/enter2tab
You can obviously look at the code to understand what it does and how..
I believe using e.preventDefault(); is safer than returning false.

Categories