I have a form and each page slides over to a new one. I noticed if user continues to press tab at the end of one div, it jumps into the next hidden dic that should only be viewed if a button is clicked. is there anyway to stop the tab at the last input field?
Thank you
You could set the hidden div's "tabindex" field to -1 and remove it when you want it to be shown/able to be tabbed to. More info here: Disabling tab focus on form elements
Related
I have a page with a few text box inputs. By default, the first text box has focus (the cursor waits inside the text box for the user to start typing) as soon as the page loads.
Although convenient, this means the up/down arrow keys cannot be used to scroll the page.
I tried:
// When DOWN key is pressed...
$("body").focus(); // or...
$("body").first().focus(); // or...
$("a:visible").first().focus();
But it doesn't work. I still have to click outside of the input box in order to start using up/down arrows to scroll again.
Use this, it will solve your problem.
$(function(){
$("input").blur();
}
Using jQuery or something similar, is it possible to detect when a user has clicked away, effectively removed focus, from a form field in iOS? I have conventional form which has a first name, last name, address line 1, address line 2 etc.
On an iPad when you select a form field the only way to leave that form field is to select another field in the form by clicking it or by hitting the Previous or Next buttons in the keyboard pane.
As the keyboard pane is shown clicks to other non-input elements on the page are ignored, so focus remains on the form field.
Is there a way with jQuery/JavaScript (or anything else) to force the focus to leave the form field if I click away from it by clicking a non-input form element?
Here's an example of what I mean. In the screen below, when the focus is on the Line 1 element I can't move out of it by clicking a non-input element.
Try just doing a quick blur() on the form, that might work.
$('body').on('click', function () {
$('form').blur();
// And since you said selecting an anchor might help, potentially doing a:
$('a#whatever').blur(); // might do the trick too
});
In my struts 1.2 application i have some fileds in text box which is in readOnly= "true" always. I will populate all the values with out any problem, but the problem is when i click on the text box the cursor is blinking on it when i try to hit backspace button it goes to my previous page end up with session expired error on the previous action.
also some scenario I am populating the text box value and i am making that text box to readOnly = "false" allowed user to end some value here when they press backspace to remove the values which is there already it goes to previous page.
Please help to avoid this situation.
Thanks in advance!
Use disabled rather than readonly. Disabled elements cannot be focused, so no confusing blinking cursors.
<textarea disabled="disabled">content</textarea>
I have custom DDL. When I navigate through the form by clicking TAB and focus to this DDL, I select item and press TAB but I can't go to the next element of the form. Focus goes to this DDL again but not to the next element. This issue is reproduced in IE, in other browsers it works well.
You can check simple example. The DDL without its styles and some logic there. The order of elements and number can be different in the form.
http://jsfiddle.net/sk8LG/12/
Thanks
Try this: I just took out the bit that checks for keyCode == "9", which is the tab key.
http://jsfiddle.net/sk8LG/13/
I'm building a 'tag input' plugin with jQuery at the moment and I've hit a small stumbling block.
I'm adding a button after a text input in a form, and using javascript to provide functionality for the button. When the button is clicked (or return is pressed in the input), the value of the input is added to a list of tags. The input is then cleared and refocused.
My problem occurs when I tab through the interface, the button after the input gains focus when you tab to it but I want to cancel this behaviour. I could just blur the button but I'd rather the button passes focus to the next focusable element.
e.g. I have three inputs in my form: text-input-1, button, text-input-2. When text-input-1 is focused and I press tab, I want focus to jump to text-input-2 rather than the button.
Can this be done? Thanks in advance.
This is easy enough in IE, which accepts a negative integer for the tabIndex property which will remove it from the tabbing order:
<input type="button" tabindex="-1" value="Can't tab to me!" />
This isn't part of the HTML 4.01 specification for tabindex, which only allows an integer between 0 and 32767. However, it is specified in the HTML 5 drafts and supported in most major browsers.
The easiest method I can think of in browsers that don't support it would be to wait for the input's onkeydown event and check for the tab key. If the tab key is pressed, disable the button and set a timeout with an interval length of 0 to enable the button again.
Change the tab index order, give text-input-1 tabindex to 100 and text-input-2 to 200 and for the button any number greater than 200. It should solve the problem.
Ah, I've answered my own question with help from Teja (+1).
All I needed to do was apply a negative tab index to the button!