Updated keypad.php and selfcheck.css to mask library card number

What steps will reproduce the problem?
1. Use touch screen/on screen keypad to enter library card.
2. See library card number on screen!

What is the expected output? What do you see instead?
I expect to see a mask.  Instead I see the entire library card number.

What version of the product are you using? On what operating system?
1.2 on Windows 7

Please provide any additional information below.

I modified the keypad_screen cell to contain a textbox that can be natively 
masked:

<td colspan="4" class="keypad_screen">
<form>
<input type="password" name="barcode" class="keypad_display"><br>
</form>
</td>

I updated the scripts to point to this textbox instead of the cell itself.

<script type="text/javascript">
//keypad functions
function show_keypad(){
tb_remove();
tb_show($('#keypad_container').html());
var keypad_key=$('#prompt .keypad div');
keypad_key.click(function (){
if (typeof $(this).data('val')!= 'undefined'){
var keypad_display=$('#prompt .keypad_display');
if (keypad_display.val().length<19){
keypad_display.val(keypad_display.val() + $(this).data('val'));
}
}
});
}

function delete_keypad_entry(){
var keypad_display=$('#prompt .keypad_display').val();
var keypad_length=keypad_display.length-1;
keypad_newdisplay=keypad_display.substr(0,keypad_length);
$('#prompt .keypad_display').val(keypad_newdisplay);
}
</script>

And last, I updated selfcheck.css to format the textbox so it looks nice:

.keypad_display {
font-size:1em;
font-weight:bold;
font-family: Arial, sans-serif;
background-color: #F0F0F0;
}

Works like a charm.  :)

Christopher Brannon
Coeur d'Alene Public Library

Original issue reported on code.google.com by supp...@cdalibrary.org on 4 Dec 2014 at 11:13

alexvancina / open-source-self-check

Updated keypad.php and selfcheck.css to mask library card number #40