Skip to content

Instantly share code, notes, and snippets.

@robtarr

robtarr/inputs.html

Created February 2, 2012 02:27
Show Gist options
  • Save robtarr/1720993 to your computer and use it in GitHub Desktop.
Save robtarr/1720993 to your computer and use it in GitHub Desktop.
Download ZIP
Number Input Tests
Raw
inputs.html
<!doctype html>
<html>
<head>
<title>Number Test</title>
<style>
tr {
background: #ddd;
}
tr:nth-child(odd) {
background: #ccc;
}
td {
border: 1px solid #bbb;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Input</th>
<th>Chrome 16 (Mac)</th>
<th>Firefox 8 (Mac)</th>
<th colspan="2">iOS 5</th>
<th colspan="2">Kindle Fire</th>
</tr>
<tr>
<th></th>
<th>Comma</th>
<th>Comma</th>
<th>Comma</th>
<th>Keyboard</th>
<th>Comma</th>
<th>Keyboard</th>
</tr>
<tbody>
<tr>
<td>
<input type="number" value="45402">
<pre>&lt;input type="number" value="45402"></pre>
</td>
<td>no</td><td>no</td>
<td>yes</td><td>number</td>
<td>no</td><td>keypad</td>
</tr>
<tr>
<td>
<input type="number" value="45402">
<pre>&lt;input type="number" value="45402"></pre>
</td>
<td>no</td><td>no</td>
<td>yes</td><td>number</td>
<td>no</td><td>keypad</td>
</tr>
<tr>
<td>
<input type="number" value="45402" pattern="[0-9]*">
<pre>&lt;input type="number" value="45402" pattern="[0-9]*"></pre>
</td>
<td>no</td><td>no</td>
<td>yes</td><td>keypad</td>
<td>no</td><td>keypad</td>
</tr>
<tr>
<td>
<input type="number" value="45402" pattern="[0-9]{5}">
<pre>&lt;input type="number" value="45402" pattern="[0-9]{5}"></pre>
</td>
<td>no</td><td>no</td>
<td>yes</td><td>number</td>
<td>no</td><td>keypad</td>
</tr>
<tr>
<td>
<input type="number" value="45402" name="zip">
<pre>&lt;input type="number" value="45402" name="zip"></pre>
</td>
<td>no</td><td>no</td>
<td>yes</td><td>number</td>
<td>no</td><td>keypad</td>
</tr>
<tr>
<td>
<input type="text" value="45402" name="zip">
<pre>&lt;input type="text" value="45402" name="zip"></pre>
</td>
<td>no</td><td>no</td>
<td>no</td><td>text</td>
<td>no</td><td>text</td>
</tr>
<tr>
<td>
<input type="number" value="45402" name="phone">
<pre>&lt;input type="number" value="45402" name="phone"></pre>
</td>
<td>no</td><td>no</td>
<td>yes</td><td>number</td>
<td>no</td><td>keypad</td>
</tr>
<tr>
<td>
<input type="text" value="45402" name="phone">
<pre>&lt;input type="text" value="45402" name="phone"></pre>
</td>
<td>no</td><td>no</td>
<td>no</td><td>text</td>
<td>no</td><td>text</td>
</tr>
<tr>
<td>
<input type="tel" value="45402">
<pre>&lt;input type="tel" value="45402"></pre>
</td>
<td>no</td><td>no</td>
<td>no</td><td>keypad</td>
<td>no</td><td>keypad</td>
</tr>
<tr>
<td>
<input type="text" value="45402">
<pre>&lt;input type="text" value="45402"></pre>
</td>
<td>no</td><td>no</td>
<td>no</td><td>text</td>
<td>no</td><td>text</td>
</tr>
<tr>
<td>
<input type="text" value="45402" pattern="[0-9]*">
<pre>&lt;input type="text" value="45402" pattern="[0-9]*"></pre>
</td>
<td>no</td><td>no</td>
<td>no</td><td>keypad</td>
<td>no</td><td>text</td>
</tr>
<tr>
<td>
<input type="text" value="45402" pattern="[0-9]{5}">
<pre>&lt;input type="text" value="45402" pattern="[0-9]{5}"></pre>
</td>
<td>no</td><td>no</td>
<td>no</td><td>text</td>
<td>no</td><td>text</td>
</tr>
<tr>
<td>
<input type="text" value="45402" pattern="[0-9]{5}(-[0-9]{4})*">
<pre>&lt;input type="text" value="45402" pattern="[0-9]{5}(-[0-9]{4})*"></pre>
</td>
<td>no</td><td></td>
<td>no</td><td>text</td>
<td>no</td><td>text</td>
</tr>
<tr>
<td>
<input type="pc" value="45402">
<pre>&lt;input type="pc" value="45402"></pre>
</td>
<td>no</td><td></td>
<td>no</td><td>text</td>
<td>no</td><td>text</td>
</tr>
<tr>
<td>
<input type="date" value="45402">
<pre>&lt;input type="date" value="45402"></pre>
</td>
<td>no</td><td></td>
<td>--</td><td>Date dropdown</td>
<td>no</td><td>text</td>
</tr>
</tbody>
</table>
</body>
@dcondrey
Copy link

dcondrey commented Sep 1, 2014

http://stackoverflow.com/a/25599024/1922144

(function ($) {
    var control = $('#test2');
    var field = $('#test1');
    control.bind('click', function () {
        if (control.is(':checked')) {
            field.attr('type', 'text');
        } else {
            field.attr('type', 'tel');
        }
    })
}(jQuery));

<input type="tel" id="test1" value="a" />
<input id="test2" type="checkbox" />Change

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment