How to mirror an input field to another input field? - javascript

I have an input field and multiple input fields, the original input field is the primary field that gets submitted.
So, I need to mirror one field to the main field.
I tried watching the keyup and change events but when the user pastes with the mouse it does not work, because the event is triggered before the user presses paste and not after it.
I am not sure that this is the best way to mirror two fields, so I am asking you if you have better methods of doing it
Is there an event that can be triggered after the paste is pressed?

Instead of triggering on key/mousevents, you could try using an "input" event on the input element you would like to mirror.
const ogInput = document.getElementById("og")
const mirrorInput = document.getElementById("mirror")
ogInput.addEventListener("input", () => {
mirrorInput.value = ogInput.value
})
<input type="text" id="og" />
<input type="text" id="mirror" />

Related

How to know if an input is clicked and unclicked in Javascript

I'm trying to figure out how to know when an input is clicked and when it is unclicked. Let me explain:
When ever you want to type something on an input field, you click on the input box and when you don't want to type, you click somewhere else and the input field is disabled.
<input type='text'>
Here as you can see, when you click on it, the field is enabled, and when you click somewhere else other than the field, it disables.
I just want to know when the field is disabled/unclicked.
When you click on the input field focus event is fired. When you lose focus blur event is fired.
var elem = document.getElementById("fname")
elem.addEventListener("blur", myFunction);
function myFunction() {
alert("Input field lost focus.");
}
<input type="text" id="fname">
I believe you're just looking for onFocus.
<input type='text' onFocus={/* do something */} />
Read more about React events here.

Automated clicked input type in Jquery

I'm having trouble and confused, is there any trigger event in Jquery to click automatically the input type using the id of the input type? The thing is I have a problem in terms of loading all data from my input type, it's just like typeahead or autocomplete, and I don't want to click the input type manually. it will very helpful for me.
Before click
After clicked
<input class="form-control" id="kt_typeahead_1" type="text" placeholder="States of USA" v-model="formFields.fullname"/>
Script
mounted() {
this.autoComplete();
},
autoComplete() {
$("#kt_typeahead_1").trigger('click');
}
$('input#kt_typeahead_1').autocomplete("search"); will initiate the autocomplete search.
If you wanted to put a value in there first so it has something to search for, $('input#kt_typeahead_1').val("My value") - and then the autocomplete.search method above
If you just want to give the input a focus, $("#kt_typeahead_1").focus()

cursor gets hidden and cannot type after window.find()

this is my input field:
<input type="text" id="searchField" [(ngModel)]='search'
(ngModelChange)='searchCalled()' class="input-text" placeholder="Filter by
Name">
and my function is:
searchCalled():any {
var text = this.search;
(<any>window).find(text);
}
after an alphabet is matched in window.find(), the cursor gets automatically hidden from the input field and I cannot type in the input field. I have to click it again in order to type. But if anything is not matched, the cursor remains there and the input field is still in focus. I have written separate functions on blur, and mouseleave to check whether it is getting blurred but it's not getting blurred which I have tested.
I tried using
document.getElementById('searchField').focus()
but it's not working.
I am using typescript in angular 4.
Any help would be appreciated.

Populate hidden field with autocomplete value

I have an HTML form with a regular text input and a hidden field.
I also have the following code that will populate the hidden field with the value of the text field either when it is changed, or if the text field has a default value (supplied by the page itself):
$(document).ready(function() {
var emailinput = document.getElementById('emailval');
document.getElementById('usernameval').value = emailinput.value;
emailinput.onkeyup = function() {
document.getElementById('usernameval').value = emailinput.value;
}
emailinput.onblur = function() {
document.getElementById('usernameval').value = emailinput.value;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="email" id="emailval" />
<input type="hidden" name="username" id="usernameval" />
This works well, except in the case where the browser autofills the text field. If the user submits the form without changing the textfield.
So my question is, is there any way to have the javascript pull the value from the browser-autofilled text field?
Attach an event handler on the form's submit event, and copy the value of #emailval to #usernameval. For example, let's say your form has the ID, #form:
$('#form').submit(function (event) {
'use strict';
$('#usernameval').val($('#emailval').val());
});
Documentation: https://api.jquery.com/submit/
What is 'input7'? I'm assuming this is a key. You could add another event for when the mouse leaves the input box, to get that value, since the user has to use the mouse to select the value.
Another thing you might want to consider, is turn off autocomplete on that field.
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
You could use the form's onsubmit event. Here's the pseudo code:-
form.onsubmit= function(e){
e.preventDefault();
document.getElementById('usernameval').value = document.getElementById('emailval').value;
this.submit();
}

html <input type="text" /> onchange event not working

I am trying to do some experiment. What I want to happen is that everytime the user types in something in the textbox, it will be displayed in a dialog box. I used the onchange event property to make it happen but it doesn't work. I still need to press the submit button to make it work. I read about AJAX and I am thinking to learn about this. Do I still need AJAX to make it work or is simple JavaScript enough? Please help.
index.php
<script type="text/javascript" src="javascript.js"> </script>
<form action="index.php" method="get">
Integer 1: <input type="text" id="num1" name="num1" onchange="checkInput('num1');" /> <br />
Integer 2: <input type="text" id="num2" name="num2" onchange="checkInput('num2');" /> <br />
<input type="submit" value="Compute" />
</form>
javascript.js
function checkInput(textbox) {
var textInput = document.getElementById(textbox).value;
alert(textInput);
}
onchange is only triggered when the control is blurred. Try onkeypress instead.
Use .on('input'... to monitor every change to an input (paste, keyup, etc) from jQuery 1.7 and above.
For static and dynamic inputs:
$(document).on('input', '.my-class', function(){
alert('Input changed');
});
For static inputs only:
$('.my-class').on('input', function(){
alert('Input changed');
});
JSFiddle with static/dynamic example: https://jsfiddle.net/op0zqrgy/7/
HTML5 defines an oninput event to catch all direct changes. it works for me.
Checking for keystrokes is only a partial solution, because it's possible to change the contents of an input field using mouse clicks. If you right-click into a text field you'll have cut and paste options that you can use to change the value without making a keystroke. Likewise, if autocomplete is enabled then you can left-click into a field and get a dropdown of previously entered text, and you can select from among your choices using a mouse click. Keystroke trapping will not detect either of these types of changes.
Sadly, there is no "onchange" event that reports changes immediately, at least as far as I know. But there is a solution that works for all cases: set up a timing event using setInterval().
Let's say that your input field has an id and name of "city":
<input type="text" name="city" id="city" />
Have a global variable named "city":
var city = "";
Add this to your page initialization:
setInterval(lookForCityChange, 100);
Then define a lookForCityChange() function:
function lookForCityChange()
{
var newCity = document.getElementById("city").value;
if (newCity != city) {
city = newCity;
doSomething(city); // do whatever you need to do
}
}
In this example, the value of "city" is checked every 100 milliseconds, which you can adjust according to your needs. If you like, use an anonymous function instead of defining lookForCityChange(). Be aware that your code or even the browser might provide an initial value for the input field so you might be notified of a "change" before the user does anything; adjust your code as necessary.
If the idea of a timing event going off every tenth of a second seems ungainly, you can initiate the timer when the input field receives the focus and terminate it (with clearInterval()) upon a blur. I don't think it's possible to change the value of an input field without its receiving the focus, so turning the timer on and off in this fashion should be safe.
onchange only occurs when the change to the input element is committed by the user, most of the time this is when the element loses focus.
if you want your function to fire everytime the element value changes you should use the oninput event - this is better than the key up/down events as the value can be changed with the user's mouse ie pasted in, or auto-fill etc
Read more about the change event here
Read more about the input event here
use following events instead of "onchange"
- onkeyup(event)
- onkeydown(event)
- onkeypress(event)
Firstly, what 'doesn't work'? Do you not see the alert?
Also, Your code could be simplified to this
<input type="text" id="num1" name="num1" onkeydown="checkInput(this);" /> <br />
function checkInput(obj) {
alert(obj.value);
}
I encountered issues where Safari wasn't firing "onchange" events on a text input field. I used a jQuery 1.7.2 "change" event and it didn't work either. I ended up using ZURB's textchange event. It works with mouseevents and can fire without leaving the field:
http://www.zurb.com/playground/jquery-text-change-custom-event
$('.inputClassToBind').bind('textchange', function (event, previousText) {
alert($(this).attr('id'));
});
A couple of comments that IMO are important:
input elements not not emitting 'change' event until USER action ENTER or blur await IS the correct behavior.
The event you want to use is "input" ("oninput"). Here is well demonstrated the different between the two: https://javascript.info/events-change-input
The two events signal two different user gestures/moments ("input" event means user is writing or navigating a select list options, but still didn't confirm the change. "change" means user did changed the value (with an enter or blur our)
Listening for key events like many here recommended is a bad practice in this case. (like people modifying the default behavior of ENTER on inputs)...
jQuery has nothing to do with this. This is all in HTML standard.
If you have problems understanding WHY this is the correct behavior, perhaps is helpful, as experiment, use your text editor or browser without a mouse/pad, just a keyboard.
My two cents.
onkeyup worked for me. onkeypress doesn't trigger when pressing back space.
It is better to use onchange(event) with <select>.
With <input> you can use below event:
- onkeyup(event)
- onkeydown(event)
- onkeypress(event)
when we use onchange while you are typing in input field – there’s no event. But when you move the focus somewhere else, for instance, click on a button – there will be a change event
you can use oninput
The oninput event triggers every time after a value is modified by the user.Unlike keyboard events, it triggers on any value change, even those that does not involve keyboard actions: pasting with a mouse or using speech recognition to dictate the text.
<input type="text" id="input"> oninput: <span id="result"></span>
<script>
input.oninput = function() {
console.log(input.value);
};
</script>
If we want to handle every modification of an <input> then this event is the best choice.
I have been facing the same issue until I figured out how to do it. You can utilize a React hook, useEffect, to write a JS function that will trigger after React rendering.
useEffect(()=>{
document.title='fix onChange with onkeyup';
const box = document.getElementById('changeBox');
box.onkeyup = function () {
console.log(box.value);
}
},[]);
Note onchange is not fired when the value of an input is changed. It is only changed when the input’s value is changed and then the input is blurred. What you’ll need to do is capture the keypress event when fired in the given input and that's why we have used onkeyup menthod.
In the functional component where you have the <Input/> for the <form/>write this
<form onSubmit={handleLogin} method='POST'>
<input
aria-label= 'Enter Email Address'
type='text'
placeholder='Email Address'
className='text-sm text-gray-base w-full mr-3 py-5 px-4 h-2 border border-gray-primary rounded mb-2'
id='changeBox'
/>
</form>
Resulting Image :
Console Image
try onpropertychange.
it only works for IE.

Categories