How to know if an input is clicked and unclicked in Javascript - 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.

Related

How to mirror an input field to another input field?

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

Javascript - Event once an element has a value

I have a hidden input, and during the logic I set the value of that hidden input.
Is there a event once this hidden input value is set ?
Given the hidden input added on the fly
when you set the value of the hidden input can you trigger an change event and then catch that? something like below. As you said "I set the value" I assume you could do that.
$('#yourElelentId').change(function(){
});
$('#yourElelentId').val(100).trigger('change');
Problem
Changes the value to hidden elements don't automatically fire the change event.
Solution
So you have to tell it jquery to fire it and you can do this with the .change() method.
let input = $("#example");
input.hide();
input.change(function(){
console.log("Value has changed");
});
input.val(10).change();
input.val(30).change();
$("form").append(`<input type="text" value="${input.val()}">`);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="example" placeholder="Type in a value" name="name"/>
<p id="values"></p>
<form>
</form>

unable to fetch input from input field

I am not able to get the input, entered by the user, from the input field; please help me out with this.
I am not able to figure out what is wrong here.
var ftemp = document.getElementById("Farenheit").value;
<td>
<input type="number" id="Farenheit">
</td>
when entering value in input field in the web page, input value is not being fetched at all.
console.log-ing the variable just shows a blank line .
This line of code
var ftemp = document.getElementById("Farenheit").value;
gets you the current value of that input at the time that line of code gets executed.
It does not update when the user changes the inputs value.
If you want it to do just that, you need to add an event listener to the input element that executes whenever the input event occurs:
var ftemp;
document.getElementById("Farenheit").addEventListener('input', function() {
ftemp = this.value;
console.log(ftemp);
})
<input type="number" id="Farenheit">
Add an event listener to the input element.
document.querySelector('input').addEventListener('keyup',function() {
console.log(this.value);
});
<input type="number" id="Farenheit" >

If text of textbox is selected then make it null

I use meiomask for time masking.masking is working perfectlly on keypress event.
Now the problem is when i am in first textbox and then i press tab so now the focus is on second textbox and it's value is selected(as you see in image).now if i try to enter some value in this textbox then the focus is out of this textbox.so to enter value in this textbox every time i remove value using backspace then enter value in the textbox.
so basically i am trying to do is on focus of textbox, if textbox value is selected and user try to enter some thing(on keypress event) then make it null.so how to achieve this thing?
Thanks in advance.
code:
$(document).on('focus','.masktime',function(){
// $(this).val("");
});
You can either use placeholders...so,
<input class="masktime" type="text" placeholder="00:00">
instead of
<input class="masktime" type="text" value="00:00">
Or, if you wish to use the value of the input tag at all times, you can emulate the behaviour of an input[placeholder] using a combination of focus and blur.
$('.masktime').on('focus', function () {
$(this).attr('oldVal', $(this).val());
$(this).val('');
});
$('.masktime').on('blur', function () {
if($(this).val()=='') {
$(this).val($(this).attr('oldVal'));
}
});
DEMO

JavaScript: How to detect a non empty input text box

I am learning JavaScript and and am working on a To Do list type of application.
Idea: "Add" button is set to disabled in the HTML and only to be enabled when there is at least one character.
My code only works when there is at least 2 characters and can't workout why it doesn't detect the first character.
The other realted question is how do I set the "add" button back to disable if the input box content has been deleted.
HTML
<input id="addToListInput" onkeydown="buttonStatus()" value="" type="text"><input id="addToListButton" disabled type="submit" Value="Add to list" onClick="addToList(this)">
JS
function buttonStatus() {
var input = document.getElementById('addToListInput');
var submit= document.getElementById('addToListButton');
if (input.value.trim() ==""){
submit.disabled=true;
}else{
submit.disabled=false;
}
}
Use keyup instead. By using keydown you are detecting when the key is down, but the textbox value has not changed at that point...
<input id="addToListInput" onkeyup="buttonStatus()" value="" type="text">
onkeydown is fired before the input control is actually fired, if you use onkeyup it should work as you expect.

Categories