Replacing input special characters with onChange - javascript

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)" />

Related

Click on button while pressing Enter

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];

Can't focus an input after "onblur"

I have three simple texts and I want to make a validation on "onblur" of the second text. It should delete the content just typed and keep focusing on the same input. I can make it delete the content, but it doesn't focus. What could be happening?
function validate() {
document.getElementById("txt-second").value = "";
document.getElementById("txt-second").focus();
}
<input type="text" id="txt-first" />
<input type="text" id="txt-second" onblur="validate();" />
<input type="text" id="txt-third" />
Strange that onblur doesn't work for me either.
<input type="text" id="txt-first"/>
<input type="text" id="txt-second"/>
<input type="text" id="txt-third"/>
<script>
function validate(event){
this.value = "";
this.focus();
}
var txtSeconds = document.getElementById("txt-second");
txtSeconds.onblur = validate;
</script>
Create a 'parent' function that has subroutines
<script>
var ele = document.getElementById("txt-second");
ele.onblur = function(){
ele.value="";
ele.focus();
}
</script>
If that doesnt work out, checkout this question Two onblur for same input id
Edit: I just tested your code out and it worked for me, problem is once it focuses I can't get the cursor out of that input box...

Making form with vanilla javascript

I want to make form with vanilla javascript. when id="text" value is nothing I meant space I want alert to pop, I'm makin' it with if statement but doesn't seem to work here's code
var input = document.getElementById('text');
function check(){
if(input.value == " "){
alert('hello');
}
}
Username: <input name="fname" type="text" onsubmit="check()" id="text" placeholder="Enter your username"> <br>
<button type="submit">asd</button>
You need to get the field value every time the user clicks - if your initial code is not after the element, your code would fail, because document.getElementById('text'); will be undefined
An input field does not have an onsubmit event
I recommend to have a value attribute too and trim it before testing
You likely mean this
document.getElementById("form1").addEventListener("submit", function(e) {
var input = document.getElementById('text');
if (input.value.trim() === "") {
alert('Please fill in user name');
input.focus();
e.preventDefault(); // stop form submission
}
});
<form action="yourserverprocess" id="form1">
Username: <input name="fname" type="text"
id="text" placeholder="Enter your username" value="" /><br />
<button type="submit">Send</button>
</form>
Without a form
document.getElementById("subbut").addEventListener("click", function(e) {
var input = document.getElementById('text'), val = input.value.trim();
if (val === "") {
alert('Please fill in user name');
input.focus();
}
else {
console.log("You typed",val);
}
});
Username: <input name="fname" type="text"
id="text" placeholder="Enter your username" value="" /><br />
<button id="subbut" type="button">Send</button>
Here's the solution of your problem.
I've made some changes in your code.
1. you have to put onsubmit event in form tag. Because doesn't support onsubmit event.
2. Change the function name from check() to checkAlert(). May be check is a library keyword which causes your code to fail.
var input = document.getElementById('text');
function checkAlert() {
if(input.value == ""){
alert('hello');
}
}
<form onsubmit = "checkAlert(this)">
Username: <input name="fname" type="text" id="text" placeholder="Enter your username"> <br>
<button type="submit">asd</button>
</form>

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">

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