Jquery Mask without using plugin beginner

Question

I would like to make an input type mask __/__ only numbers can be inputted without using any plugin just pure jquery any tips?

Another Question: For example user would input 3,, the output display will be 3/9 the (/9) will just be there and not editable cause 9 would be the maximum number of pages is this possible to achieve?

none,,i'm new to this stuff and i only know this is easy if usage of plugin, but with no plugin is it possible?? — kenjiro jaucian, Jul 24 '18 at 07:00
You really need to attempt a solution first before asking others to write one for you. — Lex, Jul 25 '18 at 00:00

Terry Wei · Accepted Answer · 2018-07-25T03:10:30.350

As far as I understood, your question is how to do the following:

Mask input field
Input field can only accept number

So I do the following steps:

Make input field as password type.
Detect the key in character while typing(keypress is done before value change), then don't change the existing value when the character is not numeric.

I added a button that you can click it to show current value.

$('#in').keypress(function(event){
  var reg = /[0-9]/g;
  var key = String.fromCharCode(event.keyCode);
  if(!reg.test(key))
    return false;
})

$('#show').click(function(event){
  alert($('#in').val());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="in" type="password"/>

<br />

<button id="show">Show Value</button>

Update

Below is an example done by this plugin.

This may meet your requirement.

$('#inputtext').securenumbermask({mask:'_',maxlength:15});

$('#show').click(function(event){
  alert($('#inputtext-original').val());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/jQuery-Plugin-To-Mask-Numbers-In-Text-Field-Secure-Number-Mask/js/securenumbermask.js">
</script>

<input class="form-control" type="text" id="inputtext" value="123" input-original="inputtext-original">

<input id="inputtext-original" type="hidden" value="**">

<br />

<button id="show">Show Value</button>

Your english is fine, no need to apologise. I'm not sure using a password field is best. It might be a cause for suspicious behaviour. You could an input with `` with the same effect — Lex, Jul 25 '18 at 00:06
AFAIK `` cannot mask input. I think `` is able to do so but I'm not able to finish it because lots of conditions may be concerned. Sorry... — Terry Wei, Jul 25 '18 at 01:43
I've found a solution here: https://www.jqueryscript.net/form/jQuery-Plugin-To-Mask-Numbers-In-Text-Field-Secure-Number-Mask.html — Terry Wei, Jul 25 '18 at 01:51

Jquery Mask without using plugin beginner

1 Answers1