I'm using the jQuery UI modal dialog, and populating it with some form fields. Because of this bug: http://bugs.jqueryui.com/ticket/4731, the first input gains focus when the dialog opens. To get around that, I'm trying to blur the affected input when the dialog is opened.
The problem is that there exists other functionality which is called for this input on a .blur(), and I don't want to fire that functionality for this.
So, I'm trying to use .focusout()and .trigger('focusout') to achieve the same effect, but with no results.
Doing either of these:
$('#input-id').focusout();
$('#input-id').trigger('focusout');
does not actually cause the input to lose focus, where using .blur() is successful. Am I missing something, or is there another way to accomplish what I need?
If you fancy a quick javascript hack you could use:
$(':focus').blur();
My suggestion would be to set the focus to some other element in the dialog when it is opened instead of setting textbox to blur. This should overcome your problem.
Hope this Helps!!
Focusout does not cause the element to lose focus. Instead focusout is triggered when an element loses focus. Check out http://api.jquery.com/focusout/
I used this as a workaround:
$('body').focus();
I used this without needing to execute javascript in the selenium driver:
field.send_keys :tab
Related
I want to know the right event when the user remove focus on a text box. Whether if the user presses tab or clicked to another field. I've seen some solutions like onchange or blur. But it doesn't satisfy all scenarios when the user remove focus. I want to use pure javascript or jquery. Thanks!
jquery focusout() is the best suited in this case
go thought this link
jQuery .focusOut() documentation
I find .focusOut() useful when I'm more specifically concerned with losing focus from a defined input or input group, since it supports event bubbling.
see the demo in http://api.jquery.com/focusout/ it works when user uses tab to focusout or clicks anothoer field
FYI: The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the blur event in that it supports detecting the loss of focus on descendant elements (in other words, it supports event bubbling).
you can use blur() event.
The blur event is sent to an element when it loses focus. Originally, this event was only applicable to form elements, such as . In recent browsers, the domain of the event has been extended to include all element types. An element can lose focus via keyboard commands, such as the Tab key, or by mouse clicks elsewhere on the page.
How do I force blurring, but without calling onBlur event in JavaScript/jQuery?
I'll try to describe you what I need it for:
when onBlur is called, I call a PHP script via jQuery and validating input. If there's something wrong, it returns a message and then I display it back in jQuery script.
if a blurred field isn't filled, script should focus user back to that field.
And the problem is that if you press TAB to change field, and your first field is not filled, script will focus you back, but then is called onBlur from second field that is also not filled, and then it causes an infinite loop.
So, i want to blur a field and focus to another without calling onBlur event.
It's not an answer as spec'ed in your question, but what I'd suggest you do (in a somewhat UX sort of perspective) is to scrap the auto-refocus on invalid input, and instead mark the invalid field (may I suggest red, for example?). Now, you can go and deal with the (arguably) simpler problem of preventing a form submit on invalid data, instead of the problem of preventing a natural browser behavior type of an event.
Additionally, I'd dare to say that auto-refocusing is irritating for the user. Imagine tabbing to the second field, start typing, then suddenly yoink! You get dragged to the first field.
Why not just use on "change" and "keyup" instead of on blur?
I agree with Richard above, there's nothing more annoying than losing focus in the middle of typing, but if you do need to do this (Due to a customer requirement etc) - in the code that auto-focuses the field, disable the onBlur function temporarily until you've focused the field, then re-enable it.
I made simple date picker using JavaScript and jQuery. After choosing date it is shown in input box. This input box is not launching change event, probably because it was changed using JavaScript. Is there any way to launch this event, or to make custom one?
Run this code after you assign new value:
$('input').change();
.change just points to the .on function inside jquery, so it's better to use the .on directly.
$('#inputID').on('change', function() {
});
$("input#yourInputId").change();
or
$("input#yourInputId").trigger("change");
Should do the trick. Replace the #yourInputId with an id that represents the ID="abc" part of your HTML for the textbox
Be aware of potential browser irregularities or lack of support for change events - behaviour may vary, particularly in older browsers.
There is a change and an input event. The first fires after an input changed and lost focus. The latter fires immediately when the input changes. However there are no events that fire after programatically changing an input.
If you have control over the code that changes your inputs you can of course trigger the events manually like described in the other answers.
Forcing focus() on an element is easy, but after having debug issues, I realize trying to determine where is my focus gone is a lot harder.
The thing is I'm generating a modal window using jq.UI, and from time to time, while focus is supposed to be set on first input of the form included in the modal, cursor just disappears, to never show again unless I reload the page.
Is there a straightforward way to detect where my focus/cursor is?
You can see which element it's on by checking document.activeElement, for example:
alert(document.activeElement.innerHTML); //see the content to aid in IDing it
I'm not sure if the focus event bubbles, but if it does, you could try this:
jQuery('body').focus(function(e){ console.log(e.target); })
I'm trying to modify this: jquery desktop
by adding a input field inside one of the windows. However, I can't type anything into the input. I opened firebug and the classes are flashing when I click the text input so I'm guessing that's what's blocking it. But I don't know how to fix this. Any help is appreciated.
In his very long article, do a page search for 'Cancel mousedown'. You'll see he's canceled any mousedown event that's not a link. That's what you'll have to alter to make it usable. You could either delete the whole thing (the point was to bind a context menu, which he ended up not doing) or add input as an exception like a is.