Skip to content
Open
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Overview

jQuery Field Mask is a simple jQuery plugin that will mask your text fields with a password field. The user can toggle between the masked input and the unmasked version via a checkbox. The use case is to allow people to enter data on a public screen, such as a kiosk, and be able to have the data hidden until they click the reveal button. The masked fields do not interfere with the submission of the form. Just add a class to the input field and a control field and you will be done.
jQuery Field Mask is a simple jQuery plugin that will unmask your password fields with a text field. The user can toggle between the masked input and the unmasked version via a checkbox. The use case is to allow people to enter data on a public screen, such as a kiosk, and be able to have the data hidden until they click the reveal button. The unmasked fields do not interfere with the submission of the form. Just add a class to the input field and a control field and you will be done.

## Setup

Expand All @@ -13,10 +13,10 @@ Include the script:
<script src="js/mask.js"></script>
```

Setup the field to mask and the field to toggle the mask:
Setup the field to unmask and the field to toggle the mask:

```
<input type="text" name="credit_card" value="" id="credit_card" class="mask"/>
<input type="password" name="credit_card" value="" id="credit_card" class="mask"/>
<input type="checkbox" name="toggle" value="1" id="toggle" class="toggle" />
```

Expand Down
18 changes: 9 additions & 9 deletions example/js/mask.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@
var $controls = $(settings.toggle);

//helper function
function createMask(unmasked) {
var new_id = unmasked.attr('id') + '_masked';
function createUnmask(masked) {
var new_id = masked.attr('id') + '_unmasked';
var new_input = document.createElement("input");
new_input.setAttribute("id", new_id);
new_input.setAttribute("type","password");
new_input.setAttribute("type","text");
new_input.setAttribute("style","display:none;")
new_input.value = unmasked.val();
unmasked.after(new_input);
return $('#'+new_id);
new_input.value = masked.val();
masked.after(new_input);
return $(new_input);
}

//bind the controls
Expand All @@ -38,8 +38,8 @@
});

return this.each(function() {
var unmasked = $('#'+this.id);
var masked = createMask(unmasked);
var masked = $(this);
var unmasked = createUnmask(masked);

this.reveal = function() {
unmasked.show();
Expand All @@ -65,4 +65,4 @@
});

};
})(jQuery);
})(jQuery);
4 changes: 2 additions & 2 deletions example/multiple-fields.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,11 @@
</p>
<p>
<label for="credit_card">Credit Card</label>
<input type="text" name="credit_card" value="" id="credit_card" class="mask"/>
<input type="password" name="credit_card" value="" id="credit_card" class="mask"/>
</p>
<p>
<label for="another_field">Another Field</label>
<input type="text" name="another_field" value="" id="another_field" class="mask">
<input type="password" name="another_field" value="" id="another_field" class="mask">
</p>
<p>
<input type="checkbox" name="toggle2" value="1" id="toggle2" class="toggle" />
Expand Down
2 changes: 1 addition & 1 deletion example/single-fields.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<form action="#" method="get" accept-charset="utf-8">
<p>
<label for="credit_card">Credit Card</label>
<input type="text" name="credit_card" value="" id="credit_card" class="mask"/>
<input type="password" name="credit_card" value="" id="credit_card" class="mask"/>
</p>
<p>
<input type="checkbox" name="toggle" value="1" id="toggle" class="toggle" />
Expand Down
54 changes: 54 additions & 0 deletions jasmine-standalone-1.3.1/SpecRunner.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Jasmine Spec Runner</title>

<link rel="shortcut icon" type="image/png" href="lib/jasmine-1.3.1/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="lib/jasmine-1.3.1/jasmine.css">
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- include source files here... -->
<script type="text/javascript" src="../lib/jquery.mask.js"></script>

<!-- include spec files here... -->
<script type="text/javascript" src="spec/SpecHelper.js"></script>
<script type="text/javascript" src="spec/jQueryMaskSpec.js"></script>


<script type="text/javascript">
(function() {
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 1000;

var htmlReporter = new jasmine.HtmlReporter();

jasmineEnv.addReporter(htmlReporter);

jasmineEnv.specFilter = function(spec) {
return htmlReporter.specFilter(spec);
};

var currentWindowOnload = window.onload;

window.onload = function() {
if (currentWindowOnload) {
currentWindowOnload();
}
execJasmine();
};

function execJasmine() {
jasmineEnv.execute();
}

})();
</script>

</head>

<body>
</body>
</html>
20 changes: 20 additions & 0 deletions jasmine-standalone-1.3.1/lib/jasmine-1.3.1/MIT.LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
Copyright (c) 2008-2011 Pivotal Labs

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Loading