I am using jQuery 1.3.2.
There is an input field in a form.
Clicking on the input field opens a div as a dropdown. The div contains a list of items. As the list size is large there is a vertical scrollbar in the div.
To close the dropdown when clicked outside, there is a blur event on the input field.
Now the problem is:
In chrome(2.0.172) when we click on the scrollbar, the input field will loose focus.
And now if you click outside, then the dropdown won't close(as the input has already lost focus when you clicked on the srollbar)
In Firefox(3.5), IE(8), opera(9.64), safari() when we click on the scrollbar the input field will not loose focus. Hence when you click outside (after clicking on the srollbar) the dropdown will close. This is the expected behaviour.
So In chrome once the scrollbar is clicked, and then if I click outside the dropdown won't close.
How can i fix this issue with chrome.
Well, I had the same problem in my dropdown control. I've asked Chrome developers concerning this issue, they said it's a bug that is not going to be fixed in the nearest future because of "it has not been reported by many people and the fix is not trivial". So, let's face the truth: this bug will stay for another year at least.
Though, for this particular case (dropdown) there is a workaround. The trick is: when one click on a scrollbar the "mouse down" event comes to the owner element of that scrollbar. We can use this fact to set a flag and check it in "onblur" handler. Here the explanation:
<input id="search_ctrl">
<div id="dropdown_wrap" style="overflow:auto;max-height:30px">
<div id="dropdown_rows">
<span>row 1</span>
<span>row 2</span>
<span>row 2</span>
</div>
</div>
"dropdown_wrap" div will get a vertical scrollbar since its content doesn't fit fixed height. Once we get the click we are pretty sure that scrollbar was clicked and focus is going to be taken off. Now some code how to handle this:
search_ctrl.onfocus = function() {
search_has_focus = true
}
search_ctrl.onblur = function() {
search_has_focus = false
if (!keep_focus) {
// hide dropdown
} else {
keep_focus = false;
search_ctrl.focus();
}
}
dropdow_wrap.onclick = function() {
if (isChrome()) {
keep_focus = search_has_focus;
}
}
That's it. We don't need any hacks for FF so there is a check for browser. In Chrome we detect click on scrollbar, allow bluring focus without closing the list and then immediately restore focus back to input control. Of course, if we have some logic for "search_ctrl.onfocus" it should be modified as well. Note that we need to check if search_ctrl had focus to prevent troubles with double clicks.
You may guess that better idea could be canceling onblur event but this won't work in Chrome. Not sure if this is bug or feature.
P.S. "dropdown_wrap" should not have any paddings or borders, otherwise user could click in this areas and we'll treat this as a scrollbar click.
I couldn't get these answers to work, maybe because they are from 2009. I just dealt with this, I think ihsoft is on the right track but a bit heavy handed.
With two functions
onMouseDown() {
lastClickWasDropdown=true;
}
onBlur() {
if (lastClickWasDropdown) {
lastClickWasDropdown = false;
box.focus();
} else {
box.close();
}
}
The trick is in how you bind the elements. The onMouseDown event should be on the "container" div which contains everything that will be clicked (ie, the text box, the dropdown arrow, and the dropdown box and its scroll bar). The Blur event (or in jQuery the focusout event) should be bound directly to the textbox.
Tested and works!
I was facing the same situation/problem and I tested the solution from "ihsoft" but it has some issues. So I worked on an alternative for that and made just one similar to "ihsoft" but one that works. here is my solution:
var hide_dropdownlist=true;
search_ctrl.onblur = function() {
search_has_focus = false
if (hide_dropdownlist) {
// hide dropdown
} else {
hide_dropdownlist = true;
search_ctrl.focus();
}
}
dropdow_wrap.onmouseover = function() {
hide_dropdownlist=false;
}
dropdow_wrap.onmouseoout = function() {
hide_dropdownlist=true;
}
I hope this will help someone.
Earlier also I faced such situation and this is what I have been doing.
$('html').click(function() {
hasFocus = 0;
hideResults();
});
and on the input field i will do this
$('input').click()
{
event.stopPropagation();
}
So this will close the drop down if clicked anywhere outside the div (even the scrollbar).
But I thought if someone could provide a more logical solution.
Could you maybe set the blur event to fire on the drop down div as well? This way, when either the input or the drop down loses focus, it will dissapear...
I'm curious...
You're using the last version of every browser, why don't you try it in chrome 4.0.202?
instead of detecting the blur, detect the document.body or window click and grab the mouse point. determine if this mouse point is outside of the menu box. presto, you've detected when they clicked outside the box!
I solved this by doing the following:
#my_container is the container which has the "overflow: auto" CSS rule
$('#my_container')
.mouseenter(function(){
// alert('ctr in!');
mouse_in_container = true;
})
.mouseleave(function(){
// alert('ctr out!');
mouse_in_container = false;
});
And then:
$('input').blur(function(){
if(mouse_in_container)
return;
... Normal code for blur event ...
});
When I select an element in the drop down, I rewrite the code as:
(>> ADDED THIS) mouse_in_container=false;
$('input').attr('active', false); // to blur input
$('#my_container').hide();
Related
I have a table and I use select menu in each row for different actions for that specific row.
For example:
$(document).on('change', '.lead-action', function() {
// Do stuff
}
this method gets the value of the selected option. Based on the selected value, I display different popups. When the user leaves the page, the select menu retains the previously selected option.
Sometimes users click on the same option in the select menu. When they do, the above code doesn't work.
Is there a way to invoke the code block above if the same option in the select menu is selected?
I'm gathering that you just want the dropdown to fire anytime a selection is made. If so, check out the answer to Fire event each time a DropDownList item is selected with jQuery.
See my updated answer below:
You can use this small extension:
$.fn.selected = function(fn) {
return this.each(function() {
var clicknum = 0;
$(this).click(function() {
clicknum++;
if (clicknum == 2) {
clicknum = 0;
fn(this);
}
});
});
}
Then call like this:
$(".lead-action").selected(function(e) {
alert('You selected ' + $(e).val());
});
Update:
I'm actually rather unhappy with the original script. It will break in a lot of situations, and any solution that relies on checking the click count twice will be very fickle.
Some scenarios to consider:
If you click on, then off, then back on, it will count both clicks and fire.
In firefox, you can open the menu with a single mouse click and drag to the chosen option without ever lifting up your mouse.
If you use any combination of keyboard strokes you are likely to get the click counter out of sync or miss the change event altogether.
You can open the dropdown with Alt+↕ (or the Spacebar in Chrome and Opera).
When the dropdown has focus, any of the arrow keys will change the selection
When the dropdown menu is open, clicking Tab or Enter will make a selection
Here's a more comprehensive extension I just came up with:
The most robust way to see if an option was selected is to use the change event, which you can handle with jQuery's .change() handler.
The only remaining thing to do is determine if the original element was selected again.
This has been asked a lot (one, two, three) without a great answer in any situation.
The simplest thing to do would be to check to see if there was a click or keyup event on the option:selected element BUT Chrome, IE, and Safari don't seem to support events on option elements, even though they are referenced in the w3c recommendation
Inside the Select element is a black box. If you listen to events on it, you can't even tell on which element the event occurred or whether the list was open or not.
The next best thing is to handle the blur event. This will indicate that the user has focused on the dropdown (perhaps seen the list, perhaps not) and made a decision that they would like to stick with the original value. To continue handling changes right away we'll still subscribe to the change event. And to ensure we don't double count, we'll set a flag if the change event was raised so we don't fire back twice:
Updated example in jsFiddle
(function ($) {
$.fn.selected = function (fn) {
return this.each(function () {
var changed = false;
$(this).focus(function () {
changed = false;
}).change(function () {
changed = true;
fn(this);
}).blur(function (e) {
if (!changed) {
fn(this);
}
});
});
};
})(jQuery);
Instead of relying on change() for this use mouseup() -
$(document).on('mouseup', '.lead-action', function() {
// Do stuff
}
That way, if they re-select, you'll get an event you can handle.
http://jsfiddle.net/jayblanchard/Hgd5z/
Right now I'm using a bit of jQuery to hide the iPad keyboard when an input loses focus.
jQuery(function($) {
$(document).on('touchend', function(e) {
document.activeElement.blur();
});
});
However during a process like the checkout when a user clicks from input to input the keyboard disappears and the reappears every time the input is changed. Is there any way to change the above jquery code to where it only blurs the active element if the place on the document that is touched does NOT have an input type of text?
Well, I haven't tried this with iPad before, so I'm not sure that it will work, but you can check the type of document.activeElement to determine if it is a text or textarea field. If it isn't, then perform your blur(). The code would be like this:
jQuery(function($) {
$(document).on('touchend', function(e) {
setTimeout(function() {
var currentElement = document.activeElement;
if ($(currentElement).not("textarea, :text").length > 0) {
currentElement.blur();
}
}, 100);
});
});
The setTimeout is needed to make sure that the focus has transferred to the next element, before checking what the current element is (doing it immediately, will return the <body> as the activeElement).
This general approach (i.e., identifying what type the current activeElement is) works in a desktop browser environment, and it SHOULD work on an iPad, but, like I said earlier, I've not had a chance to test it there, so this is more of a "possible solution" than an actual "answer", until you give it a try and se if it works for you. :D
Basically, I have drop down menu that looks like this:
<select>
<option>0</option>
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
</select>
I am trying to write a function that is fired even when you select the same option, i.e. even if the drop-down is opened and re-select the selected option, I want it to execute the function.
If you mean selecting with the mouse, you can use mouseup. However, it will fire when the select box is being opened as well, so you'll need to keep track of the amount of times it was fired (even: select is being opened, odd: select is being closed): http://jsfiddle.net/T4yUm/2/.
$("select").mouseup(function() {
var open = $(this).data("isopen");
if(open) {
alert(1);
}
$(this).data("isopen", !open);
});
pimvdb's answer was a big help for me but I added a couple of extra bits to deal with keyboard activation and navigation away from the select:
$('select').mouseup(... as in pimvdb... )
.blur(function() {
$(this).data('isopen', false);
}).keyup(function(ev) {
if (ev.keyCode == 13)
alert(1);
});
The blur handler deals with navigating away from the select while the dropdown is open, the keyup handler deals with when you change the select's value with the keyboard. The behaviour is then that the user is only considered to have finally selected the value when they click return to navigate away. If you want a different behaviour with the keyboard that shouldn't be hard to do.
select isn't meant to be used this way — there are hacks you can use to get this kind of behavior in most cases, like tracking mouse and keyboard events on the select, but there’s no guarantee they’ll keep working, or work on every platform.
I would suggest either…
Resetting the select to its default value on change, and using some other text to indicate which one is “selected”, or
using a control other than select.
Can you describe the end goal a little more detail?
An alternative, use the .blur() event -- http://jsfiddle.net/VKZb2/4/
Pro
This will fire either way.
Con
It only fires once the control loses focus.
I ran into the same issue. I just added a click event to the option tags and change the value of the select:
$("#select option").mouseup(function() {
$(this).parent().val($(this).attr("value"));
// do something.
});
NOTE: This doesn't work on iPhone or iPad devices.
Try the below solution. It accounts for loss of focus via mouse click or Esc key.
// whether or not dropdown is opened
var open = false;
$("#selectElement").on("click", function() {
open = !open;
if (!open)
{
console.log("option has been selected/re-selected");
}
});
// update dropdown state upon loss of focus
$("#selectElement").on("blur", function() {
if(open){
open = !open;
}
});
// update dropdown state upon Esc key of focus
$(document).keyup(function(e) {
if (e.keyCode == 27) {
if(open){
open = !open;
}
}
});
my error message below, with a highlighted field is working perfectly. Except now the powers that be want a different functionality.
Currently the error messaging highlights the field with a red border, and on focus the border is removed. However, now the powers that be want the red highlighting to persist until the user hits submit onclick="return formSubmit()"
I've tried using a .submit function (removing the unbind and remove focus from the .focus function, but the red highlighting persists regardless.
<!--Jquery function to override JS alert with DOM layer alert message-->
function customAlert(inputID,msg){
var div = $(".errorPopup");
div.css({"display":"block"});
$("#"+inputID).addClass("CO_form_alert").parent().addClass("alertRed");
if (div.length == 0) {
div = $("<div class='errorPopup' onclick='$(this).hide();'></div>");
$("body").prepend(div);
}
div.html(msg);
$("#"+inputID).focus(function(){
$(this).unbind('focus'); // remove this handler
$(this).removeClass("CO_form_alert")
.parent().removeClass("alertRed"); // undo changes
$('.errorPopup').hide(); // hide error popup
});
}
Not sure I understand you. If not please tell me, but can't you just do:
$('.theform').submit(function() {
$('input', this).removeClass('CO_form_alert').parent().removeClass('alertRed');
$('.errorPopup').hide();
return false;
});
Why do you need to unbind?
I was so narrow minded in my looking for a solution above - trying to tie the removeClass with the form submit (which had to many actions tied into it and would have been overly complicated).
Instead, I just did a remove class at the beginning of the error checking:
$("li").removeClass("alertRed");
$("input").removeClass("CO_form_alert");
$("select").removeClass("CO_form_alert");
I have modal popup with an overlay written in html / js, everything works fine but if a user tabs enough they can get to the underlying form fields / buttons. Is there any good way of preventing this?
This is a rough idea but I'm hoping to inspire ideas rather than tell you exactly how to do it. I'll use a combination of pseudocode and pseudo-jquery-code:
function showMymodaldExample() {
//Show modal dialog (mymodal) code goes here
//
//Then we bind an event
$(document).bind('mymodal.keydown', function(e) {
if ( currently focussed element is not a child of mymodal ) {
set the focus previous element
}
});
}
And then remember to unbind mymodal.keydown when you destroy/hide the dialog