Using Chrome, on a page with a Select element, when the Select element is clicked and the options are displayed, hover effects from other elements on the page don't work.
Using FireFox, the tooltip does display, but UNDER the select dropdown options.
What I'm trying to accomplish is when a user clicks the select element and the options are displayed, I have an anchor tag that when hovered over - displays a tooltip with instructions for each of the options in the select element.
An example of how the page is setup:
<a>Hover over me</a>
<select name="choices" id="choices-select">
<option value="a">Choice A</option>
<option value="b">Choice B</option>
<option value="c">Choice C</option>
</select>
Is there any way to allow hover events to take place elsewhere on the page, when the select element is clicked?
I was expecting that even though the select element options were visible, that I would still be able to hover over the anchor tag to see the tooltip.
Related
I have these three tabs:
When a user uses the mouse and clicks on one of the tabs, (Compliance Notes in this example), the proper element on the tabbed page gets focus and is highlighted appropriately.
However, if the user uses the keyboard and presses the Tab key to highlight the tab they want, and then presses the Enter key to select that tab, the tabbed page gets focus. Then, via JavaScript, I set focus to the proper element on that tabbed page (by using the .focus() method on that element), and the same asp:DropDownList in the example behaves like the user not only selected the element, but clicked on it:
If you then either hit Enter or Tab, manually, the dropdown list closes and the element looks like it did if the user clicked on the tab versus using the keyboard:
So, is there a "simple" way, after I use the .focus() method, to then simulate either an Enter or Tab keystroke so the element will have focus but not have the dropdown list triggered? Or is there another way, using the .focus() method or some other approach, to prevent the dropdown list from being triggered when using the keyboard to navigate the page?
The behavior you are mentioning seems to be related to the keydown event.
Here's an example - when you type in the text field it should set focus on the dropdown. When you press enter in the text field, notice that the first example (using keydown) behaves similarly to what you reported. The second example (using keypress) does not.
document.querySelector('#typeHere').addEventListener("keydown", (e) => {
document.querySelector('#focusMe').focus();
});
document.querySelector('#typeHere2').addEventListener("keypress", (e) => {
document.querySelector('#focusMe2').focus();
});
<select id='focusMe'>
<option>Test 1</option>
<option>Test 2</option>
<option>Test 3</option>
</select>
<input id='typeHere' >
<br><br>
<select id='focusMe2'>
<option>Test 1</option>
<option>Test 2</option>
<option>Test 3</option>
</select>
<input id='typeHere2'>
I've the following, very basic code:
<select id="dir">
<option value="N">N</option>
<option value="S">S</option>
<option value="E">E</option>
<option value="W">W</option>
</select>
My system displays HTML using IE. In the displayed page:
On loading the page, the initial value displayed in the field is N.
I click the field. The dropdown menu appears with the N option hovering over the field. The S, E & W options are below the field.
I click S. The dropdown menu disappears, and the value displayed in the field is now S.
I click the field again. The dropdown menu appears with the S option hovering over the field. The N option is above the field, while the E & W options remain below the field.
This is not how I expected dropdown menus to display. How do I change the code such that the entire dropdown menu is below the field whenever it's displayed, neither partially hovering over the field nor above it?
This is the normal behaviour of a dropdown select.
If you want it otherwise you'd have to either build it yourself in javascript/jquery or look for a jquery plugin.
You'd have to remove the select options above the selected one and add them afterwards again. You could use the onchange handler for that.
As said - this is the normal behaviour, even though it isn't expected by you.
In Firefox, there seems to be some weird issues around when the selectedIndex of a select field changes. It seems to change on hover, rather than on click.
Using:
setInterval(function(){console.log($('select').prop('selectedIndex'));}, 1000);
I can see the selectedIndex change as I hover over different items (the items getting a blue background and white text as I hover over them).
In Chrome, the selectedIndex only changes when an option is clicked.
I can't think of a way to work around this - I've tried to capture clicks on the options and check those against a data attribute on the select as per this SO question but the click handler only seems to work sporadically.
So when i try this on my page:
$('select[name=sel1]').change(function(){
alert(this.value);
});
With this select:
<select name="sel1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Than in firefox it only alerts when i select the option...
Greetings
I'm writing a custom form UI and currently building a select box replacement. The custom select control is basically a div with a hidden (off screen) select input in it, along with a span containing anchor elements mirroring the options of the select input:
<span class="input select">
<span id="select-select1" class="select-input"><span><span>This is the second option <a class="button" href="#"></a></span></span></span>
<span id="select-select1-options" class="select-options">
<a value="1" href="#"><span>This is the first option</span></a>
<a value="2" href="#"><span>This is the second option</span></a>
<a value="3" href="#"><span>This is the third option</span></a>
</span>
<select name="select1" id="select1" tabindex="2">
<option value="1">This is the first option</option>
<option value="2">This is the second option</option>
<option selected="selected" value="3">This is the third option</option>
</select>
</span>
When the user tabs to the field or clicks it, they actually give focus to the hidden select; the parent span then gets highlighted (with the addition of a CSS class) so that they can see which field has focus.
$('.input select').bind('focus', function() {
$(this).closest('.input').addClass('focused');
}).bind('blur', function(e) {
$(this).closest('.input').removeClass('focused');
});
However, here's what's happening:
User clicks the custom select. The span is highlighted to show it has focus, and the option anchors appear.
User clicks an option, and the option anchors are hidden again. But because the clicked option is an anchor, it then receives focus and the main select highlight disappears, when it should stay (because we still want the select to have focus).
So what I'm trying to achieve is that when one of the anchors in the custom select control is clicked, it doesn't fire the blur event on the hidden select input.
What's the best way to do this?
P.S. Sorry if this is a little confusing, it's quite difficult to explain clearly!
I'm actually building a custom selectbox replacement as well as I find all the current solutions to be lacking. You can try e.preventDefault() to see if that cancels the blur event, but my preferred method is to just give focus back to the select if an anchor is clicked, with $(this).closest('input').focus();
Also, is there a reason you are giving focus to the hidden select? You can allow your span to capture focus (and respond to tabbing) by setting its tabindex:
$('.input').attr("tabindex", $('.input select').attr("tabindex") || "0");
And then prevent the hidden input from capturing focus by hiding it fully:
$('.input select').hide();
I have an HTML select list which, when an item is selected, must show different information beneath it. The onclick or JQuery change events are triggered when a select list item is selected by being clicked on (mouse), but not when the user uses key presses (keyboard).
Any idea what event to watch in order to determine when the selected list item has changed?
Here is a BASIC test example:
<select id="mylist" name="mylist">
<option value="">(none)</option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<span id="myspan"></span>
<script type="text/javascript">
$("#mylist").change(function() {
$("#myspan").html($("#mylist").attr("selectedIndex"));
});
</script>
The code will run when the select box loses focus
(press tab or click anywhere outside of the select box)
The OnChange event is different from browser to browser when an item is changed with keyboard shortcuts.
For example, in IE, the event is fired the same way with the keyboard and the mouse, but in Firefox, to trigger the event with the keyboard, you need to press enter when the item selected is the good one. The event is also fired when the <select> loose focus (OnBlur - and only if OnChange has not already been fired) as Gaby pointed out.
It the way it's made...
It works if you change add attribute:
multiple="multiple"
if you want the dropbox, I'd bind a 'global' keyup event handler to the document.body
and do some magic there.