We Keep Coding

Is there a way to halt the tab button going any further

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

Select box not refreshing on emptying, then adding back options

Jsfiddle is here.
I have a text box and as the user type keys in the box, the multiple select box must refresh its options.
On input change, I am using this code to refresh select options,
$("select").empty()
filteredOpts.map(function(val){
$("select").append("<option name={0} value={0}>{0}</option>".format(val))
})
But, the view is not getting refreshed with new set of options.
When i move to some screen, (for example, pressing ctrl + shift + c to open chrome console) the view gets refreshed. Same behavior is seen in firefox too where the select box doesn't show the filtered options, but when i go to firebug console and come back, the select box has refreshed its options.

It's because you're only handling the Change event and not the Input event like you say you are. The Change event only fires after the element is blurred.
Change:
$("body").on("change", "#pattern", textChange)
To:
$("body").on("input change", "#pattern", textChange)
(You can probably drop the Change event altogether from that, too).
Working JSFiddle demo.

change event will be fired when you focus out of the text box.use keyup event instead change try this $("body").on("keyup", "#pattern", textChange) .

force the focus to leave a form field with jQuery in iOS when selecting non-input element

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
});

Unselect a Select Input

I have a "select" input that is programmed to open up a modal box when clicked to get some information before proceeding. That part all works great.
The problem is that once the modal box is up, the select dropdown options are all still visible. I want that select input to go back to being a normal, not clicked on at all, select box.
What javascript or jquery code can I use to make that select dropdown clear away?

I think it is more correct to move handler from click to change. In this case select will be close and keyboard changes also will be processed

Try using this instead:
$('#mySelect').focus(function(event){
event.preventDefault();
// code here
});
If that does't work, try using the preventDefault() with the click event.
The focus will at least allows users navigating fields with the keyboard (tab, etc) instead of the mouse.

Prior to jQuery 1.6
$('#mySelectBox :selected').attr('selected', '');
jQuery 1.6 and higher
$('#mySelectBox :selected').removeProp('selected', '');

I'm not sure that you can do it with standard select tag. Maybe because it still has focus. What I did when I needed a customized select tag is to avoid the select tag completely and use a button which graphically looks like the select button. Look at this page - look at the TAX button and the button to the left of it. There is no select tag, but it works great.

jQuery / Javascript pass focus to next element while tabbing through page

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!