onBlur and onFocus event - javascript

I have a textbox that is using a masking plugin for Phone and onblur I am removing a particular class. However on tab key from another field it again turns to red. The code is as follows:
<input data-val="true" data-val-regex="Alt. Phone is not correct" data-val-regex-pattern="(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}" id="AltPhone" maxlength="14" name="AltPhone" tabindex="6" type="text" value="" class="">
$("#AltPhone").blur(function () {
$(this).removeClass('input-validation-error');
$("label[for='AltPhone']").removeClass('input-validation-error');
});
$("#AltPhone").focus(function () {
$("label[for='AltPhone']").removeClass('input-validation-error');
$(this).removeClass('input-validation-error');
});
The blur function is working as expected, but focus is not.

Please check this code will work for you and let me know.
$("#AltPhone").focusout(function () {
$("label[for='AltPhone']").removeClass('input-validation-error');
$(this).removeClass('input-validation-error');
});

As you can see in console its working fine .Don't know but it may be because of your plugin.If possible please post some code.
$("#AltPhone").blur(function () {
$(this).removeClass('input-validation-error');
$("label[for='AltPhone']").removeClass('input-validation-error');
console.log("blur");
});
$("#AltPhone").focus(function () {
$("label[for='AltPhone']").removeClass('input-validation-error');
$(this).removeClass('input-validation-error');
console.log("focus");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<input data-val="true" data-val-regex="Alt. Phone is not correct" data-val-regex-pattern="(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}" id="AltPhone" maxlength="14" name="AltPhone" tabindex="6" type="text" value="" class="">

Related

Stop focus event adding the stopPropagation method issue

I want to show only one alert when i focus on this textbar, i'm using the JS stop.Propagation() method to stop the event listener, this don't seems to work, i also want to avoid adding the html attribute "onFocus='' ".
Thank you.
const textbar = document.querySelector('#search');
textbar.addEventListener('focus', (event) => {
alert("hi");
event.stopPropagation();
});
<input type="text" name="search" id="search" placeholder="Search Employee Details" class="form-control" />
You can try to use a boolean variable to achieve that. Not sure it will work as you wish for the next focus (after you leave the input and focus it again).
const textbar = document.querySelector('#search');
let focused = false
textbar.addEventListener('focus', (event) => {
if(!focused) {
alert("hi");
focused=true
} else {
focused=false
}
});
<input type="text" name="search" id="search" placeholder="Search Employee Details" class="form-control" />

Textbox Class Onchange Event Listener Not Working with Multiple Classes

<input class="item-quantities valid" data-bomid="1939" data-rid="2054" id="AddedItemIDs_1939_" name="AddedItemIDs[1939]" onkeypress="return isNumberKey(event)" type="text" value="7" aria-invalid="false">
Can't get this to work. What I've tried...
$('.item-quantities, .valid').change(function () {
alert("we are here");
});
or...
$('.item-quantities.valid').change(function () {
alert("we are here");
});
or...
$('.item-quantities').change(function () {
alert("we are here");
});
... and a few other variations.
Can't seem to figure out how to trigger this event. I've been playing around with various variations of $('.item-quantities, .valid'), to no avail. What is the correct way to do this?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$(".item-quantities").change(function () {
alert("we are here");
});
});
</script>
</head>
<body>
<input id="items" class="item-quantities valid" type="text">
</body>
<html>
That will do the trick for classes
Try this:
$('.item-quantities.valid').change(function () {
alert("we are here");
});
But change event of text only fires on its focus lost, its better to use keypress or keydown
Working fiddle
You can use oninput and onkeypress event like this: Working fiddle
$('.item-quantities, .valid').on('input',function(e){
alert("we are here")
});
$('.item-quantities, .valid').on('change keypress', function(e){
alert("we are xfgdfgdgdfg")
});
Or like this
<input class="item-quantities valid" type="text" onchange="yourFunction();"
onkeyup="this.onchange();" onpaste="this.onchange(); onkeypress=this.onchange()" oninput="this.onchange();"/>

Jquery select behavior differ on IE

I have simple code:
<input id="thisInput" class="MyInput"
maxlength="3"
value=" 0"
type="text" />
and JS code:
$("#thisInput").on( "click", function() {
$(this).select();
});
In Chrome this code. In first click selects all values in input. The other click end with no selection
In IE11 each click end with selection of all text in input.
my code is somewhat wrong? Or Chrome or IE is bugged?
JSFIDDLe
Like #Jai commented, this is the Chrome behavior. Personally I don't consider this a Chrome bug nor a IE one.
Selecting the text always
If you want to always select the text from input, you can trick it with an async call:
$("#thisInput").on("click", function() {
setTimeout(function() {
$(this).select();
}.bind(this), 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="thisInput" class="MyInput" maxlength="3" value=" 0" type="text" />
Toggle selection
Well, the best working solution I see is using a flag and toggling it:
var select = false;
$("#thisInput").on("click", function() {
if (select = !select) {
$(this).select();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="thisInput" class="MyInput" maxlength="3" value=" 0" type="text" />
It may happened that click event is not triggering properly in IE, so try adding focus event also
$("#thisInput").on( "click focus", function() {
$(this).select();
});
JSFiddle Demo

Auto tab to next input field when fill 4 characters

What I am trying to do is, point to next tab when filling four characters. Each field should have 4 characters and once it is completed it should move to next input box.
$(".inputs").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).next('.inputs').focus();
}
});
Fiddle.
Your code works fine, however your input elements are set as type="number". Non-numeric content is ignored, so if you enter "abcd", for example, the input's value is empty (meaning a length of 0). If you enter "1234" on the other hand, the input's value is 1234.
If you want your code to fire when non-numeric content is entered, simply change each input's type to text.
<input class="inputs" type="text" maxlength="4" />
JSFiddle demo.
Note that I've also removed the duplicate class attribute from each of your elements in that example, too.
As krish has mentioned in the comments on your question, there is an issue with your code in that the last input element will continue to accept more than 4 characters. To fix this, put a check in place to ensure that there is a next('.inputs') element:
if (this.value.length == this.maxLength) {
var $next = $(this).next('.inputs');
if ($next.length)
$(this).next('.inputs').focus();
else
$(this).blur();
}
JSFiddle demo.
Perhaps you neglected to enclose your code in DOM ready. Jsfiddle encloses your code in $(window).load(function() { .....}) and that's why it's working. So on your own page use:
$(function() {
$(".inputs").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).next('.inputs').focus();
}
});
});
In the jsfiddle you can confirm that by selecting No wrap - in <head> and then click run. The code will not work. But if you use the above which is enclosed in DOM ready, it works.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<Script>
$(document).ready(function(){
$(".inputs").keyup(function () {
$this=$(this);
if ($this.val().length >=$this.data("maxlength")) {
if($this.val().length>$this.data("maxlength")){
$this.val($this.val().substring(0,4));
}
$this.next(".inputs").focus();
}
});
});
</Script>
</head>
<body>
<input type="text" class="inputs" data-maxlength="4">
<input type="text" class="inputs" data-maxlength="4">
<input type="text" class="inputs" data-maxlength="4">
<input type="text" class="inputs" data-maxlength="4">
</body>
Here is a improved Version for all who need this for some kind of splitted Informations like a serial key or something like that:
$(document).ready(function(){
$(".amazonInput").keydown(function (e) {
var code = e.which;
$this=$(this);
if ($this.val().length >=$this.data("maxlength") && code != 8) {
if($this.val().length>$this.data("maxlength")){
$this.val($this.val().substring(0,4));
}
$this.next(".amazonInput").focus();
}
if($this.val().length == 0 && code == 8) {
$this.prev(".amazonInput").focus();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
My first issue with this has been that if tabbing through fields that are already filled, you have to select each field manually. I suggest this:
$(".inputs").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).next('.inputs').select();
}
});
The second issue's solution escapes me. Basically, in the same situation of having fields previously filled, if you type too quickly the events will fire as such: KeyDown KeyDown KeyUp KeyUp
What this causes, is to skip the next input.
For those Who Have tried the Accepted Answer, but Couldn't find solution like me
In your Layout Page or page header, just input ajax library link (Shown in below)
It worked on me, Hope It will help you as well.
$(".inputs").keyup(function () {
if (this.value.length == this.maxLength) {
var $next = $(this).next('.inputs');
if ($next.length)
$(this).next('.inputs').focus();
else
$(this).blur();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input class="inputs" type="text" maxlength="4" style="font-size:10px" />
<input class="inputs" type="text" maxlength="4" style="font-size:10px" />
<input class="inputs" type="text" maxlength="4" style="font-size:10px" />
</body>

how to set event if cursor is out of an input tag in jquery

im new to jquery and i want to know how to get value of an input tag when a cursor is out/left to that input element/tag. Thank you in advance.
Use blur event
$(function() {
$('input[type="text"]').on('blur' , function() {
// Your code here
});
});
CHECK DEMO
I think the method you're searching is focusout
$(function() {
$('#input-element').focusout(function() {
// put your code here!
});
});
I hope it helps.
<form>
<input id="target" type="text" value="Field 1" />
<input type="text" value="Field 2" />
</form>
<div id="other">
Trigger the handler
</div>
<script>
$('#target').blur(function() {
alert('Handler for .blur() called.');
});

Categories