Masking inputs any field and values

Question

I would like to know how to get the length of an input and replace everything between the values start and end but leave 2 chars and both ends.

I don't want to predefine the length as I want it to work on any input with any value and still be able to read the values with PHP when form submitted.

Input: Hello world street 12 Output: He*** ***** ****** 12

Input: 185445414631 Output: 18********31

Js lib: https://github.com/igorescobar/jQuery-Mask-Plugin

My code: https://jsfiddle.net/k4y0ctho/1/

Mask the string leaving first 2 characters and last 1. This is the pattern right.? — Himanshu Upadhyay, Sep 18 '17 at 13:38
And the string would be having numbers always or it can be alphabets as shown in example ? — Himanshu Upadhyay, Sep 18 '17 at 13:52

score 1 · Accepted Answer · edited Sep 19 '17 at 09:30

1

if your output is acceptable on other field, this might be useful

$("#input").on("keyup", function() {
 
  var input = $(this).val().split("")
  var res = $.map(input, (el, ix) => {
    return ix < 2 || ix > input.length - 3? el:"*"
  })

  $("#output").html(res.join(""));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="password" id="input" />
<br><span id="output"></span>

edited Sep 19 '17 at 09:30

T30

11,422
7
53
57

answered Sep 18 '17 at 13:54

asdf_enel_hak

7,474
5
42
84

thats a good start, better what i have right now but its should be the other way around with the masking :) – Zoric Sep 18 '17 at 14:02

M0nst3R · Answer 2 · 2017-09-18T14:49:49.837

If you are using jQuery what you can do is :

// Util function to mask the value
function maskValue(value) {
    if (typeof value !== 'string' || value.length <= 4) {
        return value;
    }
    return value.split('').map((v, i) => { return (i > 1 && i < value.length - 2 ? '*' : v); }).join('');
}

// actual value (not masked)
let actualValue = '';

// keyup event to handle new input and mask the value
$("#my-input").on("keyup", function(event) {
    if (event.key === 'Backspace') {
        actualValue = actualValue.substring(0, actualValue.length - 1);
    }
    else {
        actualValue += event.key;
    }
    $('#my-input').val(maskValue(actualValue));
});

Please keep in mind that this is not perfect as it only supports normal keys (letters, numbers, symbols) and the backspace button.

Masking inputs any field and values

2 Answers2

Linked