<commit_before># touch-input-nav

> Scopes touch-web tabbed input navigation to input elements inside the same form

![touch-input-nav](http://i.imgur.com/adaP4uB.gif)

*Video made using [SimFinger](https://github.com/atebits/SimFinger)*

## Installation

### Zip

Download a [zip](https://github.com/ChrisWren/touch-input-nav/archive/master.zip) which includes both minfied and un-minified versions.

### bower

```bash
bower install touch-input-nav
```

### browserify

```bash
npm install --save-dev touch-input-nav
```

## Usage

*Note that this module is dependent on jQuery.*

This module will add a global listener for the `focus` event on all input, select, and textarea elements and then when the focus event occurs, it will disable all other input elements that are not inside the focused-element's parent `form` element. It applies a class on the disabled elements so that they appear enabled in case they are visible within the viewport. A user can still click on these `disabled` elements, just not tab to them as they are not a part of a form-flow.

```js
    touchInputNav();
});
```

### touchInputNav([className])

#### className
Type: `string`

A class to allow for custom styling of the disabled state. This can be used to override how the disabled state is presented for form input elements outside of the current form scope.

## Current Browsers supported

- iOS Safari/Chrome

*Note: all other browsers will have no input field disabling applied.*<commit_msg>Added Usage examples to README<commit_after># touch-input-nav

> Scopes touch-web tabbed input navigation to input elements inside the same form

![touch-input-nav](http://i.imgur.com/adaP4uB.gif)

*Video made using [SimFinger](https://github.com/atebits/SimFinger)*

## Installation

### Zip

Download a [zip](https://github.com/ChrisWren/touch-input-nav/archive/master.zip) which includes both minfied and un-minified versions.

### bower

```bash
bower install touch-input-nav
```

### browserify

```bash
npm install --save-dev touch-input-nav
```

## Usage

*Note that this module is dependent on jQuery.*

This module will add a global listener for the `focus` event on all input, select, and textarea elements and then when the focus event occurs, it will disable all other input elements that are not inside the focused-element's parent `form` element. It applies a class on the disabled elements so that they appear enabled in case they are visible within the viewport. A user can still click on these `disabled` elements, just not tab to them as they are not a part of a form-flow.

```js
// no module loader
window.touchInputNav();

// requirejs
require(['touch-input-nav'], function (touchInputNav) {
  touchInputNav();
});

// browserify
require('touch-input-nav')();
```

### touchInputNav([className])

#### className
Type: `string`

A class to allow for custom styling of the disabled state. This can be used to override how the disabled state is presented for form input elements outside of the current form scope.

## Current Browsers supported

- iOS Safari/Chrome

*Note: all other browsers will have no input field disabling applied.*
{'fraction_non_alphanumeric': 0.0975765306122449, 'fraction_numerical': 0.0006377551020408163, 'mean_word_length': 4.427335640138408, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3966552', 'n_tokens_mistral': 891, 'n_tokens_neox': 855, 'n_words': 395}