I've a mysterious problem. I've built a browser-based application for a customer who prefers to use the keyboard - no mouse, no touch panel.
I have a simple HTML-Form like this which contains some times:
<input tabindex="1" name="abc" type="text" />
<select tabindex="2" name="efg">
<option value="10:00:00">10.00</option>
<option value="11:00:00">11.00</option>
<option value="12:00:00">12.00</option>
<option value="...">up to 24</option>
</select>
now my customer recognized that it's not possible to select the "11.00" option using keyboard. E.g. after hitting "TAB" and jumping to "select" you can enter "10" on the numblock of your keyboard and the option "10.00" is selected. It's possible on any time, except "11.00" and "22.00". Hitting the key "1" or "2" twice the pointer always jumps to the next option (e.g: twice "1" -> 12.00 is selected)
I've checked this behavior on any major browser under Linux and Windows: Everywhere the same issue.
jsFiddle
Is there an option to fix the problem?
Assuming you don't have any JavaScript interference, this select should be totally usable with only a keyboard with the default browser behavior. Once you have selected a dropdown using tab, you can:
Type a character to jump to the first option that starts with this character
Type the character again to jump to the next option that starts with this character (and so forth)
Use the up and down arrow keys to navigate through the options
Use the enter key, spacebar, or Alt + Down to expand the list of options
Use Alt + Up to collapse the list of options
Collapse the options by using Tab to jump to the next focusable element.
I dropped your sample HTML into a clean webpage, and everything worked as I expected. I'd check to see if you have any JS that is capturing the relevant keypress events.
Related
I am in the process of converting an old client/server app to a web browser-based application, and have an issue with the standard HTML SELECT element. Users of this app enter search term/operator pairs to construct a search on a large database (see sample markup below).
<input type="text" id="txtTerm1" />
<select id="selOp1">
<option value=""></option>
<option value="or">Or</option>
<option value="near">Near (any)</option>
<option value="near2">Near (within 2 words)</option>
<option value="near4">Near (within 4 words)</option>
<option value="before">Before (any distance)</option>
<option value="before2">Before (within 2 words)</option>
<option value="before4">Before (within 4 words)</option>
</select>
A search term is entered into txtTerm1, and then TAB or ENTER is pressed to move to selOp1. The users like to use the keyboard exclusively to choose an operator from selOp1. When they quickly press "n", the select control iterates through the "near" options perfectly. But if the user then decides they want to switch to "Or" and types "o," the control does not select the "Or" option.
Test: Type n,n,n,n,n,o in rapid succession
It seems that if you type quickly and then change characters, the SELECT element groups the two characters together, "no" in this case, and does not find an OPTION with that text. If I wait a few seconds after typing the n's and then press o, it works. But this slows the users down and is confusing. This behavior seems to be the same in Chrome, Firefox and IE.
The question:
Is there a way to force a SELECT to only use the first character of the OPTION text when trying to locate an OPTION with the keyboard? Or does anyone have any other clever solutions? Any advice is greatly appreciated.
Disclaimer: I am using JQuery Mobile.
I have a bunch of pages with different forms on, but some of them seem to exhibit different behaviour when pressing the next/previous buttons.
All forms are set up with tab index.
Form 1 works perfectly, except it skips the JQuery Mobile flip switches and radio buttons, which isn't really a problem as they are a bit different.
Form 2, the element with tabindex="0" has focus set to it using $("#myElement").focus(); and then the next button is disabled, and pressing the previous button goes to the bottom of the form, i.e. the next/prev order seems to be 1, 2, 0.
Form 3 seems to be completely erratic, this time going downwards in order but some fields seem to be setting the focus to the label first, then pressing next again causes the input field to be selected.
Form 4 works fine, apart from the last select field seems to be ignored. Then the tabindex jumps to some anchor elements on the page before continuing to the flip switches.
Form 5 has the same behaviour as Form 4, again the last select field in the form is ignored.
I will continue to investigate this, and produce a fiddle, but has anyone experienced these kind of issues or has some insight into how they should work?
OK all these are my errors but it might help someone, so here goes.
The next/previous order does seem to be directly related to the tabindex attribute, with no strings attached.
However to my error, tabindex starts at 1 not 0. http://www.w3schools.com/tags/att_global_tabindex.asp. So for Form 2, it started at 1, then 2, then 0.
I was using knockoutjs to bind the tabindex attribute to the $index() of an observableArray item that represented each field and field value, which made the error harder to spot. So I had to change it to $index() + 1.
For the radio buttons, the index was being taken from the collection of options, not the parent, so I had to use $parentContext.index() + 1 for those (see here: https://stackoverflow.com/a/11013401/1061602).
Attempting the same approach for flip switches doesn't seem to do anything.
The completely erratic form was because there was another form still existing on the DOM that had tabindex attributes set to a similar set of values, so it is tabbing between the two forms in turn. The easiest solution for me was to hide the existing form, see here: https://stackoverflow.com/a/5494043/1061602.
The commonality between Form 4 and Form 5 was also that they had the same tabindex (6) however this was a red herring. Still investigating why the last select field is skipped in Chrome - however on iOS Safari it works as expected, so problems solved!!
At least for Firefox/Chrome, you can use mozactionhint:
<input name="foo" tabindex="1" mozactionhint="Next"> // will go to next: "bar"
<input name="bar" tabindex="2" mozactionhint="Next"> // will submit the form
<input type="submit" tabindex="3">Submit</input>
What I want is that the text box is only accessible if a certain option is picked from the drop down menu and i have a html form as below:
<tr>
<td>a. Did any of your staff participate in training or orientation sessions related to any aspect of social performance management, during the reporting year?
<td >
<select name="mfi_4_a_i">
<option>Please choose one.</option>
<option>Yes</option>
<option>No</option>
<option>No, but planning in future</option>
</select>
<p>if not,and not planning please explain why not?</p>
<input type="text" name="mfi_4_a_ii" class="init" disabled="disabled"/>
</tr>
Now when the option No, but planning in future is selected then the textbox must be enabled.This type of dropdown menu has been used many times in this form so i have to enable the textbox in another similar case too so how a single function can be written to do this.Help me out guys.
First of all, you should close your td's by adding a </td> to the end of the contents. That way browsers will have less trouble finding the right element if you use javascript.
Also, you will need to add values to your options, so that a form handler knows which has been picked. You could use something like:
<select name="mfi_4_a_i">
<option>Please choose one.</option>
<option value="yes">Yes</option>
<option value="no">No</option>
<option value="later">No, but planning in future</option>
</select>
You can leave the first one blank because they have to pick something else anyway.
About the textbox, you have to use javascript for this. Do you happen to use jQuery? That would make it easier to handle these things, especially if you re-use it a lot. It can also be done in regular javascript but I'm not sure about the code for it. Here's the solution in jQuery:
$('select').change(function(){
$input = $(this).parent().find('input');
if($(this).attr('value') == 'later') {
$input.removeAttr('disabled');
$input.focus();
} else {
$input.attr('disabled','true');
}
});
What this does: everytime a select dropdown changes values (something has been picked) it checks whether the option with value later was picked (maybe 'specify' would be more appropriate..). If that's true, it finds the first textbox that's inside the same element as the select. In this case both are at the same level in a td, if your html gets more complicated maybe you have to find another way to look for the nearest textbox.
If the input is found, it is set to enabled and the cursor is placed inside so they can start typing immediately.
If another option than 'later' is picked, the textbox is disabled again.
I have a <select> tag with various options, and I would like to know what determines what happens when the user starts typing.
Say I have a list like the following:
<select id="userlist">
<option value="nothing" selected="selected"></option>
<option value="AdamT">Adam T</option>
<option value="AidanC">Aidan C</option>
<option value="IanQ">Ian Q</option>
<option value="JamesR">James R</option>
</select>
Sometimes if I type A followed by I, I end up with Aidan C selected.
Other times, if I type just fractionally slower, I end up with Ian Q selected.
What determines what ends up being selected, and at what speed of typing? Is it browser-specific, or is it set in the HTML spec?
That is browser or OS specific, depending if the browser uses native or custom widgets, I think.
There is certainly nothing in the HTML spec about it.
The < select > is setup so that it performs a new autocomplete in about 1000 milisecond intervals between key presses. If you keep typing before the timer is up, it will continue the autocomplete with your current prefix. However, if you wait a second between key presses, it will start a new prefix, forgetting what you previously typed.
I have a case where I want to allow a form variable to be set to one of a set of value (in my current case true/false) or left unset (in which case no value is returned rather than some 'none' value or a blank). A check box can give the unset bit but only one set value. A radio element could work, sort of. But once a value is selected there is no way to go back to unset. All the other inputs I've looked at always set the variable no matter what.
Am I missing something or am I just going to have to accept a less-than-ideal solution?
Three radio buttons or a <select> with three <option> will do.
Put three radios: A, B and None
Do a 'drop down menu' as show here: http://www.echoecho.com/htmlforms11.htm
Create the default value as 'None' followed by option A and then option B.
What about a drop down list with
---Please Select---
Option A
Option B
I've been applying to a lot of jobs online lately, and this is the route people generally have been taking.
Would a dropdown box work?
<select name="choices">
<option>(None)</option>
<option value="a">Choice A</option>
<option value="b">Choice B</option>
</select>
You would need to use some javascript. If you have jQuery there are several tri-state checkbox plugins.
For example: http://plugins.jquery.com/project/tristate-checkbox
There are also probably non jQuery scripts if you google for "tri state checkbox"
For example: http://caih.org/open-source-software/tri-state-checkbox-in-javascript/
Using 3 radio buttons in one group, you could hide the first 'none' radio button with CSS (visibility:hidden; or display:none;), and if that's the one still selected during your form validation, then the user hasn't chosen either of the true or false radios.
EDIT (post comments):
If no-Javascript is a requirement, then you can conditionally apply a 'hideableItem' class on the hidden radio, if scripting is disabled the worst you'll get is 3 radio for the user to choose from, as others have described. If JS is enabled, then the default radio is hidden and provides the behaviour i've described.
The conditional hiding if JS is dis/enabled technique is described here: http://lucassmith.name/2008/10/script-to-add-css-only-when-javascript-is-available.html
I use it all the time, its great.