I want to set up an onBlur event for an input element that validates the value and, if invalid, "cancels" the blur and refocusses(or focus never loss) the current input.
i have this peace of code already
document.getElementById('my_input_id1').onblur = function() {
var self = this;
setTimeout(function() { self.focus(); }, 10);
}
Suppose my next focused element is'my_input_id2' which also has an "onblur" event.as focus is already moved to 'my_input_id2'.When i set focus back to 'my_input_id1' the second elment 'my_input_id2' "onblur event is fried.I want to cancel onblur event of second element.i have many other element with "onlur" for Validation.
Can i stop elemnt not to lost focus?
Is there another function that can do it without lost focus??
Should i use some other function that does not lose focus??
Is there another way to get out of this problem??
Many many thanks in advance.
Try it
$('#my_input_id1').on('blur',function(){
if(SOME CONDITION){
setTimeout(function(){
$('#my_input_id1').focus();
},100);
return false;
}
});
This is quite straight forward to do with JavaScript:
document.getElementById('id1').onblur = function(e) {
if(this.value.length == 0) {
this.focus();
e.preventDefault();
return false;
}
}
Essentially just refocusing the element based on a criteria, of course this can be anything you want it to be.
and here is the fiddle: http://jsfiddle.net/m4cZ2/1/
Related
I have written a blur() event to handle focus out event on a text field. The code looks like this.
$("input[type=text]").blur(function (event) {
if(this.value){
//do something
}
event.originalEvent.handled = true;
});
I have a situation where a text-field is automatically getting focus with the text from previous page.
To give an example, in flipkart.com, type some text in the search field and click search. My event handler must execute for focus out event. (It is happening correctly).
In the next page, the text entered is prepopulated in the text-field and focus is also on it. So in this page, if I do some action, the text-field will lose focus and the same event gets called again. I don't need this to happen.
Is there a way to avoid this? By combining two event handlers? Please help.
Change your code so that the function is only bound to the element after a user explicitly interacts with the element like so:
$("input[type=text]").on('keyup keypress change click', function() {
$("input[type=text]").blur(function(event) {
if (this.value) {
//do something
alert('blur was called after interacting with element');
}
event.originalEvent.handled = true;
});
});
$('#test').focus();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="test" value="some value">
Try this : You know the text value from previous page, just compare it with current text value, if both same then don't do any action. See below code
$(function(){
var prevTextValue = "read your previous text value here";
$("input[type=text]").blur(function (event) {
//check if value is not empty and not equal to previous value
if(this.value!="" && this.value != prevTextValue){
//do something
}
event.originalEvent.handled = true;
});
});
I use the following code to add the selected div value into a input.
var lastFocus;
$('.num-button').click(function(e){
e.preventDefault();
e.stopPropagation();
//addOrRemoveWatermark(lastFocus);
$(lastFocus).val($(lastFocus).val() + $(this).children('span').html());
});
$('.del').click(function(e){
e.preventDefault();
e.stopPropagation();
//addOrRemoveWatermark(lastFocus);
$(lastFocus).val(function(index, text){
return text.replace(/(\s+)?.$/, '');
});
})
below is a sample image if the input panel I have! This is developed for a touch device and hence the key pad.
The script works fine to add value on each button press in the keypad. The problem I'm facing is for the room number I want to run an ajax call after the user has entered the amount. But since the focus is removed every button click, how can I run the script when the focus is changed to another input. I tried the jquery .focusout() method but it gets fired each and every time the user clicks on a number button.
if anyone can suggest me a work around that would be a great help!
thank you!
Perhaps you could delay the request with something like the following:
var roomNoChanged = false;
$('#room-number').change(function() {
roomNoChanged = true;
});
$('#table-number, #no-of-guests').focus(function() {
if(roomNoChanged) {
roomNoChanged = false;
$.post(...)
}
});
trying to figure out why this is happening - I have an input text field and I want all the text to be highlighted when the field receives focus. This happens, very quickly, and then all of the text is unselected. Any idea why this would occur? Here's the code I'm using:
$("#permalink").focus(function(){
this.select();
});
You need to override the mouseup event on the input element (as mentioned in this post - thanks MrSlayer!)
See here for example: http://jsfiddle.net/f8TdX/
This is an issue in WebKit. The best option is to use a combination of the focus and mouseup events. The following comes from another answer to a similar question.
$("#permalink").focus(function() {
var $this = $(this);
$this.select();
window.setTimeout(function() {
$this.select();
}, 1);
// Work around WebKit's little problem
$this.mouseup(function() {
// Prevent further mouseup intervention
$this.unbind("mouseup");
return false;
});
});
Give this a shot
$(document).ready(function() {
$("input:text").focus(function() { $(this).select(); } );
});
Select all contents of textbox when it receives focus (JavaScript or jQuery)
There are two elements in play:
$('#myInput') // an input field for search
$('#myList') // a list to display search results
I want to hide the list when the input no longer has focus, like so:
$('#myInput').blur(function() {
$('#myList').hide();
});
This works great, except when a list item is clicked, because the blur event fires and hides the list before the click is registered. The goal is for the list to stay visible when any part of the list is clicked, even though this will cause the input to blur.
How can I do this? Thanks!
You can accomplish this by keeping a global variable, and setTimouts, to wait a delay of 200ms and then check if one of the 2 elements have focus.
var keepFocus = false;
function hideList(){
if(!keepFocus){
$('#myList').hide();
}
}
$('#myInput').blur(function() {
keepFocus = false;
window.setTimeout(hideList, 200);
}).focus(function(){
keepFocus = true;
});
$('#myList').blur(function() {
keepFocus = false;
window.setTimeout(hideList, 200);
}).focus(function(){
keepFocus = true;
});
I've faced with the exact same problem, so this is how I solved it.
I came up with the fact that blur() fires earlier than click().
So I've tried to change click() to mousedown() and found out that mousedown() fires before blur().
And to imitate click() you'll have to fire mousedown() and then mouseup()
So in your case I would do something like this:
var click_in_process = false; // global
$('#myList').mousedown(function() {
click_in_process = true;
});
$('#myList').mouseup(function() {
click_in_process = false;
$('#myInput').focus();
// a code of $('#myList') clicking event
});
$('#myInput').blur(function() {
if(!click_in_process) {
$('#myList').hide();
// a code of what you want to happen after you really left $('#myInput')
}
});
Demo / example: http://jsfiddle.net/bbrh4/
Hope it helps!
You need to be able to say "do this blur() unless the list gains focus at the same time".
This question says how to detect if an element has focus: Using jQuery to test if an input has focus
Then all you need to do is:
$("#myInput").blur(function () {
if (!$("#myList").is(":focus")) {
$("#myList").hide();
}
});
Pigalev Pavel's answer above works great.
However, If you want an even simplier solution, you can just "prevent default" in the "mousedown" of an element to prevent the blur event from taking place. (since preventing default actually means that in the end, the input never looses focus in the first place!)
Of course, this is only if you're alright with preventing default in the div. It does have some side-effects, like the text is no longer selectable. As long as that's not an issue, this will work.
I suppose if you hold the mouse down over the div, move the mouse outside of the div, and then release the mouse, it also doesn't fire the "blur" event. But in my case, I wasn't too worried about that either, since the click started in the target div.
$("input").focus(function(){
$(this).val("");
});
$("input").blur(function(){
$(this).val("blur event fired!");
});
$("div").mousedown(function(e){
e.preventDefault();
})
div{
height: 200px;
width: 200px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input>
<div>
Click here to prevent blur event!
</div>
The best way to do this is to attach an event handler to the body element, then another handler to the list that stops event propagation:
$(body).click(function () {
$("#myList").hide();
});
$("#myList").click(function (e) {
e.stopImmediatePropagation();
});
This listens for a click outside of #myInput and hides #myList. At the same time, the second function listens for a click on #myList and if it occurs, it prevents the hide() from firing.
What I wanted to do is figure out whenever the user is engaged with an INPUT or TEXTAREA element and set a variable flag to true... and set that flag to false immediately after the user is no longer engaged with them (ie. they've clicked out of the INPUT/TEXTAREA elements).
I used jQuery's docuemnt.ready function to add the onclick attribute to my body element and assign it to my getActive() function.
The code for the getActive() function is as follows:
function getActive()
{
activeObj = document.activeElement;
var inFocus = false;
if (activeObj.tagName == "INPUT" || activeObj.tagName == "TEXTAREA")
{
inFocus = true;
}
}
I'd really like to keep by project withing the jQuery framework, but can't seem to find a way of accomplishing the same logic above using JUST jQuery syntax.
You want the focus and blur event handlers. For example...
var inFocus = false;
$('input, textarea').focus(function() {
inFocus = true;
});
$('input, textarea').blur(function() {
inFocus = false;
});
I'm pretty sure that a comma will get you input OR textarea, but you get the idea if that doesn't pan out
function getActive(){
return $(document.activeElement).is('input') || $(document.activeElement).is('textarea');
}
For the original question about figuring out if the currently focused element is any of those user input elements, below should work:
function isInputElementInFocus() {
return $(document.activeElement).is(":input");
}
Conceptually I don't like this approach for generic case where you are listening to global events (like key strocks) and trying to decide if these should be handled by your global handler or be ignored because it is meant for someone else. The reason I don't like it because it's not future safe and also who knows what else that someone can be besides input elements.
Another more robust but tricky to implement idea is to test if event is meant for an element that has tabIndex >= 0. The input elements have tabIndex === 0 set by default so it becomes more or less similar to above approach. You can easily check this by event.target.tabIndex >= 0 without need to rely on document.activeElement.
The gotchas here (if you want to be generic) is that you also need to make sure that event.target element is neither in another branch in DOM hierarchy nor there is someone else between event.currentTarget and event.target that has tabIndex >= 0. You get the idea: This can become murky but I just thought to jot it down if someone else is in need of generic solution.
You can do something like this :
var focusItem = null;
$('input, textarea').focus( function() {
focusItem = this;
});
Iis the .blur() event what you're looking for?