Detect when input is start/end focused - javascript

I need to know if it's possible to detect when is input start focused and when is focus ended
HTML code:
<input type="text" value="" class="datas" >
<input type="text" value="" class="datas" >
<input type="text" value="" class="datas" >
JQuery code(only example how i need this):
$('.datas').on('focusStart', alert("focusStarted"));
$('.datas').on('focusEnd', alert("focusEnded"));
Anyone has any ideas?
Thanks for it.
Answer:
JQuery code:
$(".datas").focus(function(){
alert("This input field has starts focus.");
});
$(".datas").blur(function(){
alert("This input field has lost its focus.");
});

$('.datas').on('focus',function(){
alert('focusStarted');
}).on('blur',function(){
alert('focusEnded');
}

I guess "focus" and "blur" are what events you are looking for.
$('.datas').on('focus', alert("focusStarted"));
$('.datas').on('blur', alert("focusEnded"));
Hope that help.

Related

Javascript, I am not being able to cursor to input box

I can't set focus on html input, I tried this code, And it doesn't work.
document.getElementById('ember19').focus();
document.getElementById('ember19').click();
document.getElementById('ember19').select();
document.getElementById('ember19').value='Badman55555#hotmail.com';
document.getElementById('ember19').setAttribute('value','Badman55555#hotmail.com');
document.getElementById('ember22').focus();
document.getElementById('ember22').click();
document.getElementById('ember22').select();
document.getElementById('ember22').value='Bad123456';
document.getElementById('ember22').setAttribute('value','Bad123456');
Please before answer try your code on this page
https://id.sonyentertainmentnetwork.com/signin/
Try using autofocus
<input type="text" name="myInput" autofocus />
https://www.w3schools.com/tags/att_autofocus.asp

What's the difference of click and focus event between mobile devices and Computers?

I realize the function of this : jump to next input after finishing this input that's focused (just need one charactor). And it does work on computer.
I need to realize that when someone input a charactor like "a" through keyboard , and it will focus on the next input . I know how to realize it on computers.
if ($(this).val().length === 1){
$(this).next().focus();
}
And I know keyup method to bind this.
But on mobile phones something bad happended:
It dosen't work on mobiles and Virtual keyboard of phones will hide after input .
I heard there is 300ms delay after click on the phone . How to trigger focus or click immediately on mobile devices?
<input type="text" >
<input type="text" >
<input type="text" >
<input type="text" >
jQuery keyup's method should works fine.
Try something like this:
$.each($(".input"),function(){
$(this).keyup(function() {
$(this).next().focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="input" type="text" />
<input class="input" type="text" />
<input class="input" type="text" />

Jquery toggle input visibility on click and focus

Hello I am working on a simple form that also uses place-holder text. I am implementing this behaviour with JQuery and not html attributes, mainly because the place-holder input also shows error messages to the user which need to be styled differently than plain place-holder text.
Right now the form behaves like this.
Clicking on the input hides the the place-holder input and sets focus on the main input field.
If the user has entered data then the place-holder does not show up.
Now this is all fine, but when the user presses the TAB key to change focus, none of the above happens.
Here is the relevant JQuery code and the HTML:
$("#plh_username").click(function(){
$(this).hide();
$("#username").focus();
});
$('body').click(function(e){
var target = $(e.target);
if(!target.is('#plh_username')) {
if ( $("#username").val() == "" ){
$("#plh_username").show();
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="input" id="plh_username" class="inp_placeholder" value="Username" />
<input type="text" name="username" id="username" value="" />
How can I achieve the same effect when the user selects an input field without actually clicking on one?
You could try using .focus() and .focusout() instead of .click().
$("#plh_username").focus(function(){
$(this).hide();
$("#username").focus();
});
$('#username').focusout(function(){
if ($(this).val() === ""){
$("#plh_username").show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="input" id="plh_username" class="inp_placeholder" value="Username" />
<input type="text" name="username" id="username" value="" />
<input value="Press tab or shift+tab" />
Quote from the documentation:
Elements with focus are usually highlighted in some way by the
browser, for example with a dotted line surrounding the element. The
focus is used to determine which element is the first to receive
keyboard-related events.
Dont use .click(). Use .focus().
I think you are looking for onfocus event. This event triggers when a control gains the focus.
$("#plh_username").focus( function(){
alert("focus")
});
for example see http://jsfiddle.net/wb2vef0g/

Focusing next text field on condition satisfaction

I am trying to learn jquery. I have two text fields. When the length of the first field becomes 3 i need the cursor to move to the next text box. How can i accomplish it? Please help me to find the answer
<input id="phone_field1" maxlength="3" name="phone_1" type="text">
<input id="phone_field2" maxlength="3" name="phone_1" type="text">
My code is given here. Please help me.
Do like below:
$('#phone_field1').on('input',function(){//or keyup,you can use input rather id
if($(this).val().length == $(this).prop('maxlength')){
$(this).next().focus();
}
});
Add missing bracket.

Fire up ajax request when some inputs has changed

I have the following inputs:
<input class="input-text" type="text" name="nombres" id="nombres" />
<input class="input-text" type="text" name="apellidoP" id="apellidoP" />
<input class="input-text" type="text" name="apellidoM" id="apellidoM" />
<input class="input-text" type="text" name="nacimiento" id="nacimiento" />
I want to make an ajax request when the "nombres" and "nacimiento" inputs has changed and are not empty, and when "apellidoP" or "apellidoM" also has changed and are not empty.
How can I do that with jQuery? The only solution I have in mind is to trigger "change" event of every input and check if conditions are met, do you have another solution?
Thanks
If you are only interested in completed changes to field values you may want to look into jQuery's blur handler.
That's generally the way you will do it, check for the requirements in the change event.
Your talking about javascript events. Check this out: http://www.w3schools.com/js/js_events.asp
The following would execute checkEmail() whenever you changed something. Just check the text value of the input element in your function before doing whatever you wanted.
<input type="text" size="30" id="email" onchange="checkEmail()" />
$('#nombres').change(function(){
if($(this).val() !== '') {
//function to execute
}
});
Same applies for apellidoP and apellidoM.

Categories