I am trying for checking condition for textfield is focus or not
if($.txt_username.foucs() == 'true'){
alert('textfield username focus');
}
else{
alert('textfield username out of focus');
}
any one advice me how to check the condition for textfield is focus () or blur();
add focus and blur events in your code to check when field is focussed and blurred. update boolian variable to set focus or blur state .Check that variable to perform any operation which you want to perform on focus or non focus (blur ) of textField.
$.txt_username.addEventListener('focus', function() {
focussed = true;
});
$.txt_username..addEventListener('blur', function() {
focussed = false;
});
if(focussed){
//do whatever you want when field is focus
}else{
//do whatever you want when field is not focus
}
focus is a jQuery function to set a focus handler function to the element. It doesnt test for whether the element is currently focused.
Example of use of focus:
$( "#target" ).focus(function() {
alert( "Handler for .focus() called." );
});
Could you rewrite your logic so that you are notified when the element is focused? In the focus event handler you could write your code.
blur also works the same way. You can assign a blur handler function using the blur() function.
Testing for focus with JS:
var selected = document.activeElement;
if (selected.id == "myTxtIdUName") {
alert('Field username focused');
}else{
alert('Field username NOT focused');
}
Note: Active element of html page in a background window doesn't have focus. So, if you want to check for that also, you can use selected.hasFocus for more accurate results.
Related
I am trying to use the following script to detect if any fields in my form have changed (edit: detect if the values of my form fields have changed), and alert the user if so. Otherwise, another js box is displayed.
It's not detecting any changes though, and the confirm box is never shown. What am I doing wrong?
$('#eventMedia').click(function() {
var form_changed = false;
$('#tribe-events > form').on('keyup change', 'input, select, textarea', function(){
form_changed = true;
});
if (form_changed == true) {
confirm('You have unsaved changes! Click Cancel to save your changes before continuing.');
} else {
$('#eventMediaBox').show();
$('#blackFade').show();
}
});
You're starting to register keyup and change events only once the #eventMedia button is clicked which is probably not the desired order of things.
instead:
// Set the boolean flag variable first
var form_changed = false;
// On `input change` events - set flag to truthy
$('#tribe-events > form').on('input change', 'input, select, textarea', function(){
form_changed = true;
});
// Showtime!
$('#eventMedia').click(function() {
if (form_changed) {
alert('You have unsaved changes! Save your changes before continuing.');
} else {
$('#eventMediaBox, #blackFade').show();
}
});
Notice that the "input" event (in .on('input change') will also cover the cases where the user pastes content using mouse etc...
Also, don't forget to reset sometimes your form_changed back to false in your code...
Now thinking back to your UI... I have a question. "Why?". Yes, why show a "SAVE" or whatever #eventMedia does if the user did not changed anything in the form? I mean if a user did any changes than there's no reason to do anything - right?
This should suffice I think:
> button is disabled="true"
> (User makes changes?) on `input change` make enabled.
when I change the value of a text input and then blur that input it triggers the input change event again. How can it register this blur as an input change? is there a way to prevent this?
$('input').on('input change',function(){
//do something
});
$(function(){
$('#onchange').on('change',function(){
alert('changed')
});
$('#onEveryLetter').on('input',function(){
alert('onEveryLetter')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
onchange: <input type="text" id="onchange" name="Jenish" />
<br/>
onEveryLetter: <input type="text" id="onEveryLetter" name="Jenish" />
Simply remove the change event from your code. The change event is fired onblur, but only if something has been changed since it was last blurred.
Use:
$('input').on('input',function(){
//do something
});
Jenish's answer is correct. What's more... For those who are using a delegated listener like jQuery .on(), Here is an example that allows you to capture all the change events on the other form elements (textarea, select, etc) and ignore the change event triggered by a blur on text INPUTs.
$('div').on('input change',function(e){
// This will keep the text INPUT from triggering for change event on blur.
if(e.type == 'change' && e.target.nodeName == 'INPUT') {
return false;
}
// Text INPUTs still pick up on the input event here
});
I'm using jquery-ui datepicker as one of my inputs. If a user blurs from an input, I display a relevant message (e.g. "This field is required"). For this purpose I have the following jQuery, which works perfectly fine for simple <select> and <input type="text"> tags:
$("input").blur(function(){
if($(this).val()=="")
$(this).next().text("This field is required.");
else
$(this).next().text("");
});
However, in case of datepicker (where I have to essentially blur to select a date) the error message gets displayed even after I've selected the date (i.e. selection of date is leading to the blur event). This requires that the .blur(function(){}); should be called after the blur event is completed (not simultaneously).
How to solve this situation?
Here's a DEMO.
You could add your validation check to the onClose event of the datepicker, rather than the blur event of the input field:
$("#datepicker").datepicker({onClose: function(selectedDate) {
if(!selectedDate) {
$(this).next().text("This field is required.");
}
}});
Kind of a hack, but you could just delay the check with setTimeout:
$("input").blur(function () {
var $t = $(this);
setTimeout(function () {
if ($t.val() == "") $t.next().text("This field is required.");
else $t.next().text("");
}, 100);
});
http://jsfiddle.net/D4AGz/96/
I have a checkout form where a zipcode is needed. I need this zipcode to get a LocationID. The zipcodes are in 0000XX format but i just need the first 4 digits. Now i have made a (global) javascript to get the locationID trough ajax.
The only problem is that now im using a keyup function that is activated when someone types in a zipcode. But i want it to be activated when a user has typed in something and clicks on another field. how can i do this ?
$('#deliveryzip').bind('keyup change', function(){
//Get zip
var zip = $('#deliveryzip').val();
//Strip first 4 chars from input
//check if 4 chars are integer
//if all ok do ajax...
//Get locationID from zipcode
$.post(jssitebaseUrl+'/ajaxFile.php',{"zip":zip,"action":"getLocInfo"},function(response){
if(response == "ok"){
alert(response);
//If return is ok..
var show = true;
}
});
if(show){
$('#locInfo').show();
} else {
$('#locInfo').hide();
}
return false;
});
Instead of listening to the keyup event, why don't you just listen to the change event?
$('#deliveryzip').on('change', function(){....});
The change event fires when an input field changed and once it looses focus (e.g. through the user clicking on another element). See http://msdn.microsoft.com/en-us/library/ie/ms536912(v=vs.85).aspx for more info (from Microsof) and here the documentation from Mozilla https://developer.mozilla.org/en-US/docs/Web/Reference/Events/change
You can use onBlur function : http://www.w3schools.com/jsref/event_onblur.asp
The onblur event occurs when an object loses focus.
Onblur is most often used with form validation code (e.g. when the user leaves a form field).
Tip: The onblur event is the opposite of the onfocus event.
With jQuery : on( "blur", handler )
Change 'keyup change' to blur
Blur is essentially the opposite of focus
Documentation here
I have the following html code:
<input type="text" id="theInput" value=""/>
Click me
I want to detect when the input changes and perform an operation in this case, but ONLY when the user has not clicked in the link. I have tried this:
$('#theLink').live('click', function(){
alert('click');
});
$('#theInput').live('change', function(){
alert('change');
});
However change is always executed before click when the value in the input changed, due to Javascript event precedence rules, and therefore only "change" message is displayed.
I would like it to display change only if the input value changed and the user exited the input clicking in any other place instead of the link. In that last case I would like to display click.
The example is here.
I use jQuery 1.6.4.
As far as I know, the click event fires after the blur and change events in every browser (have a look at this JSFiddle). The order of blur and change is different across browsers (source: Nicholas Zakas).
To solve your problem, you could listen to click events on the document and compare the event's target with #theLink. Any click event will bubble up to the document (unless it is prevented).
Try this:
var lastValue = '';
$(document).click(function(event) {
var newValue = $('#theInput').val();
if ($(event.target).is('#theLink')) {
// The link was clicked
} else if (newValue !== lastValue) {
// Something else was clicked & input has changed
} else {
// Something else was clicked but input didn't change
}
lastValue = newValue;
});
JSFiddle: http://jsfiddle.net/PPvG/TTwEG/
Both events will fire but in your example the alert in the onchange event handler fired when the onmousedown event occurs will stop the onmouseup event required for the onclick event to fire. Using console.log will show both events firing.
http://jsfiddle.net/hTqNr/4/
Ok, now i got it, you could do
$('#theLink').live('click', function(e){
alert('click');
});
$('#theInput').live('change', function(e){
//Check if the change events is triggerede by the link
if(e.originalEvent.explicitOriginalTarget.data === "Click me"){
//if this is the case trigger the click event of the link
$('#theLink').trigger("click");
}else{
//otherwise do what you would do in the change handler
alert('change');
}
});
Fiddle here http://jsfiddle.net/hTqNr/19/
why you dont pick the value of input box. you have to store initial value of input box on ready function
initialvalue= $('#theInput').val();
then compare the value
$('#theLink').live('click', function(){
var newvalue =$('#theInput').val();
if(newvalue!=initialvalue) {
//do something
}
});