We Keep Coding

How to trigger a function when the typing cursor leaves the input text field?

I want to trigger a function when the typing cursor leaves the input text field. Does such an event exists? If someone knows please let me know, Thanks.
// to trigger this function
function trigger () {
console.log("no longer able to type in input text);
}

Just use onblur. You can do this in both vanilla js and jquery.
Vanilla Js:
function test() {
alert('Exited');
}
document.getElementById('waffle').addEventListener('blur', function(){
alert('exited waffle');
});
<input type="text" onblur="test()">
<input type="text" id="waffle">
With JQuery:
$('#test').on('blur', function(){
alert('exited');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="test" type="text">
Jquery Ref: https://api.jquery.com/blur/
Vanilla: https://developer.mozilla.org/en-US/docs/Web/Events/blur

Yes, there is an event that you can bind a function to called "blur". It looks like this if you use addEventListener():
document.getElementById("myInput").addEventListener("blur", function() {
alert("focused out");
});
<input id="myInput"/>
Or if you have a named function, myFunction, you can register it on the DOM element via the input tag:
function myFunction() {
alert("focused out");
};
<input onblur="myFunction()"/>

digitalbush input mask position of cursor jquery

DEMO
jQuery(function($){
$("#date").mask("99/99/9999",{placeholder:"mm/dd/yyyy"});
$("#phone").mask("(999) 999-9999");
$("#tin").mask("99-9999999");
$("#ssn").mask("999-99-9999");
});
I have tried using the digitalbush input mask. It is working ok.
The problem is , I wanted to make the cursor appear to the left most part of the input when the input is focused.I cant find a way to do this.Also i wanted to call the .change(); event of the input by doing something like this
jQuery(function($){
$("#phone").mask("(999) 999-9999");
$("#phone").change();
});
Unfortunately the event is not called.
How to place the cursor to left most part of input on focus.
Call event .change() of input after finish typing.
I tried making a demo but i cant make the maskedinput work. Please bear with it.
$(document).ready(function() {
$("#id").focus(function() {
jQuery(function($) {
$.mask.definitions["9"] = null;
$.mask.definitions["^"] = "[0-9]";
$.mask.definitions["N"] = "[N,V]";
$("#id").mask("^^^-^^^-^^^-^^^N");
$("#id").change();
});
});
$("#id").change(function() {
console.log('change')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/digitalBush/jquery.maskedinput/1.4.1/dist/jquery.maskedinput.js"></script>
<input type="text" id="id" name="" maxlength="20" class=" ">

Select Text in Input On Focus Bootstrap 3

I have 4 fields for API keys (test and live, secret and public) all with the class of .key
I'm trying to get a select of the input value on focus of the input.
The input looks like so:
<input
type="text"
name="live_public_key"
class="form-control text-center key"
value="API key here"
readonly>
I've searched all over and the common answer to this seems to be something similar to this:
<script>
$(document).on('focus', '.key', function() {
this.select();
});
</script>
But this doesn't work.
It selects the text for a milli-second the deselects it and seems to move the focus back to the input itself.
I don't know if this is a bootstrap thing or if I've coded something wrong.

The field is geting unselected on mouseup. Try this:
$(document).on('focus', '.key', function() {
this.select();
}).on('mouseup', '.key', function(e) {
e.preventDefault();
});
JSFiddle

Use a workaround:
<script>
$(document).on('focus', '.key', function() {
var that = this;
window.setTimeout (function(){
that.select();
}, 100);
});
</script>

input forced to focus while onblur event

I have try to focus while onblur Event. it works on chrome not on firefox. how to sort out.
function a() {
$("#login").focus();
}
$(document).ready(function() {
$("#login").focus();
});
<input id="login" onblur="a()"></input>
Please help.

You can just remove the onblur function and write instead:
$(document).ready(function () {
$("#login").focus();
$(document).on('click', function () {
$("#login").focus();
});
});
Live jsfiddle: http://jsfiddle.net/ysjkzvh7/

Do something like that;
$( "#login" ).blur(function() {
$(this).focus();
});
and
<input id="login"></input>
just try different things. But every browser is different.

If you don't want the input to lose focus, just unbind the blur function from it.
Try this -
$(document).ready(function() {
$("#login").unbind('blur');
});

Detect change in an input field when selecting value from a box

I want to detect a change in the input field when i select a value from the box like in the picture below.
html:
<input type="text" class="AgeChangeInput" id="range"/>
js:(not working)
<script>
$(document).ready(function()
{
alert("Hello");
$("#range").bind('input', function()
{
alert("done");
});
});
</script>
I also tried live on functions but they didn;t work too.

Your date selection box should fire a change event, then you only need to capture it:
$(function () {
$('#range').change(function () {
...
});
});
If the selection box doesn't fire the event, you'll need to trick the dom. Something like:
$(document).ready(function () {
// Asuming your selection box opens on input click
$('#range').click(function () {
$('.special-box-class').click(fireRangeEvent);
});
// Now the firing function
function fireRangeEvent() {
...
}
});
Hope it works

Try to use this code
changeDate - This event is fired when the date is changed.
$('#range').datepicker().on('changeDate', function(ev) {
//example of condition
if (ev.date.valueOf() > checkout.date.valueOf()) {
//make action here
alert('Here');
}
});