github/bootstrap
1
1
Fork 0
mirror of https://github.com/jasny/bootstrap.git synced 2026-01-15 01:18:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

Added inputmask

Browse Source
This commit is contained in:
Arnold Daniels
2013-10-21 22:32:08 +02:00
parent 30e1ca1959
commit bbbd5aa211
8 changed files with 831 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
javascript.html
View File

@@ -1914,6 +1914,87 @@ $('#myCarousel').on('slide.bs.carousel', function () {
<!-- Overview
================================================== -->
<!-- Input mask
================================================== -->
<div class="bs-docs-section bs-jasny">
Hallo
<div class="page-header">
<h1 id="inputmask">Input mask <small>inputmask.js</small></h1>
</div>
<h2 id="inputmask-examples">Example</h2>
<p>Input masks can be used to force the user to enter data conform a specific format. Unlike validation, the user can't enter any other key than the ones specified by the mask.</p>
<div class="bs-example">
<input type="text" class="form-control" data-mask="999-99-999-9999-9" placeholder="ISBN">
</div>
{% highlight html %}
<input type="text" class="form-control" data-mask="999-99-999-9999-9" placeholder="ISBN">
{% endhighlight %}
<hr class="bs-docs-separator">
<h2 id="inputmask-usage">Usage</h2>
<h3>Via data attributes</h3>
<p>Add data attributes to register an element with inputmask functionality as shown in the example above.</p>
<h3>Via JavaScript</h3>
<p>Call the input mask via javascript:</p>
{% highlight js %}
$('.inputmask').inputmask({
mask: '999-99-999-9999-9'
})
{% endhighlight %}
<h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-mask="999-99-999-9999-9"</code>.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 50px;">type</th>
<th style="width: 100px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>mask</td>
<td>string</td>
<td>''</td>
<td>A string of formatting and literal characters, defining the input mask (see below).</td>
</tr>
<tr>
<td>placeholder</td>
<td>string</td>
<td>'_'</td>
<td>The character that is displayed where something needs to be typed.</td>
</tr>
</tbody>
</table>
</div>
<h3>Format</h3>
<p>Each typed character needs to match exactly one character in the <code>mask</code> option.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr><th>Character</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td>9</td><td>Number</td></tr>
<tr><td>a</td><td>Letter</td></tr>
<tr><td>?</td><td>Alphanumeric</td></tr>
<tr><td>*</td><td>Any character</td></tr>
</tbody>
</table>
</div>
<h3>Methods</h3>
<h4>.inputmask(options)</h4>
<p>Initializes an input element with an input mask.</p>
</div>