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!
Related
I am using jquery virtual keyboard in my page. i have two input boxes. On my page load i manually focus the first input field. so that virtual keyboard enabled. on pressing VK Tab in focus to next input field. so far fine. But as per new requirement when the user enters 8 characters in the first input field then the focus should move to next input field. I tried adding the condition in the virtual keyboard button click event and set $('#nexIPField').focus() but not working as expected. How to achieve this?
What i am thinking is manually trigger the tab key event solve the problem. If it is right how to trigger the tab key event?
One way to do this would be to associate an onchange event on your textbox.
Call a function on change to check the number of characters which have been typed. Once it reaches 8, trigger a focus on your next sibling.
<input type='text' onchange='checkChars()'/>
Javascript:
function checkChars() {
//take length of that input field and check for 8
$(this).next().focus();
}
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
});
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/
Lets suppose we have a html text input element and it has text "abc" and cursor is between "b" and "c". If we press backspace key then how can we get the value "ac"?
Please note that in case of special keys KeyPress event do not fire. The only events that fire are KeyDown and KeyUp and none of them has the value after the effect of special key is applied. The effect is visible after the eventhandlers of these events exit but since we have only these two events we have to somehow get the affected/latest value inside these events.
We can go to a complex way by manually applying the effect ourselves but its very very complicated given the facts that we have to find the cursor position, write different code for different special keys and bring browser compatibility. The browser, whichever it is, is already applying the effect once the eventhandlers exit but is there some way to get that latest value in those events without manually applying it or in some other event?
Please note that I am not searching for "how to find which key is pressed". I can find that by looking at the event object inside the KeyDown or KeyUp event handlers. I want to apply the effect of the special key without using a lot of manual code.
I have already looked at Capturing HTML Text Input Key press after key has been applied?. Its talking about a different thing than my question.
My ultimate task is to have a web page with only two controls: a textbox and a button. The button is initially disabled. User can type in textbox and on every key its checked that there is some text in the textbox, if there is then button is enabled, if not then button is disabled. The difficult part is to take into consideration special keys such as delete, enter, tab, backspace.
Note: I do not want to work on the blur eventhandler of the HTML text element because it affects the tab order.
Example using jQuery. The target value is stored on the title attribute, but you could make this an ajax request, or whatever logic you need. In the following case, typing 'abc' in the text box will make the go button enabled.
HTML:
<input type="text" title="abc" id="in">
<input type="button" id="go" value="Go" disabled="disabled">
Javascript:
$("#in").keyup(function() {
if($(this).val() == $(this).attr("title")) {
$("#go").removeAttr("disabled");
}
});
JSFiddle
I am trying to set a few input field connectd to each other.
in the 1st field you can enter 3 digit
in the 2nd field you can enter 3 digit
in the 3rd field you can enter 4 digits
When i the first field as 3 digits, i would like to have the focus move to the 2nd one and same for the moving to teh 3rd one.
Using not so smart javascript it ie working, however on iPhne there is an issue: whene the focus is moved to the 2nd field, althouth i manage to create and trigger different events on eh field, the on screen keyboard do not want to reappear.
I tried to use simple focus() method.
Then to create and dispatch focus event, click event touchstart event, touch end event but i di dnot manage to figure out how to make the browser show the keyboard.
Is there anyone out there with an idea how to do this?
HELP
Thx
Daniel
An element.focus() should show the keyboard. You must be doing something wrong. Additionally if all your input / text areas are in a form element it should auto advance to the next element. You can also use element.blur() to hide the keyboard.