how to make a field input type password show the last 4 characters

Question

how to make a field input type password show the last 4 characters

Navigation

#1 by (1 votes)

0

I would like to do as they do that the fields input with type password can show the 4 characters, it is very common in the areas where you pay with a card, that you put your card and shows you the last characters or digits

javascript jquery html5 php

asked by El Jona 02.10.2017 в 02:26

source

1 answer

SUM AND COUNT in a query with left join in MYSQL SQL query with 4 related tables

score 1 · Accepted Answer

How about, I did some tests and came up with the following result that I would like to share with you:

<!Doctype html>
<html>
<head>
   <meta charset="utf-8">
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="show.js"></script>
</head>
<body>
    <p>Numero de tarjeta:</p>
    <input type="text" maxlength="11" id="datos">
</body>
</html>

It is necessary to establish an encoding of utf-8 in the header, then add the library of JQuery and limit the maximum number of characters of the input to 11 as well as adding an id.

The show.js file contains jquery with the following code:

$(document).ready(function(){
    var pActual = 0;
    var cardNumber = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
    var str = "";
    var cnt = 0;
    $("#datos").keyup(function(){
        pActual = $(this).val().length;
        var vActual = $(this).val();
        vActual = vActual.substr(pActual-1, pActual);
        if(pActual < 8){
            for(var i = 0; i <= cardNumber.length-1; i++){
                if(cardNumber[i] == vActual){
                    cnt = pActual;
                    if(cnt === pActual){
                        str += "•";
                        cnt += pActual;
                    }
                    $(this).val(str);
                }
            }
        }
        if($(this).val().length != cnt){
           str = str.substr(0, pActual);
           }
    });
});

It reads as follows:

1.-When finished loading all the html execute a function

2.- Within the function declare 4 variables:

pCurrent: Contains the length of the characters entered in the input.
cardNumber: Fix that contains numbers that it will hide.
str: String that will replace the text.
cnt: counter that verifies if a character was deleted.

3.- In the selector with the id 'data' execute a function each time you press and release a key.

4.- Establishes pActual as the current length of the characters within the input.

5.- A variable called vActual is created that contains the last entered character.

6.- If the length of the characters in the input is less than 8 then:

Iterate the number of times in length of the arrangement minus 1 (taking into account that it starts counting from 0).
If the current character equals any number in the array then:
Set cnt as the current amount of the input length.
If cnt is equal to the length of the input:
A special character is added to str (for this the encoding of the header in the html).
A cnt is added and equal to the Current position.

7.- The string 'str' is shown inside the input

8.- If the current value of the input is not equal to the previous longitude counter 'cnt' then:

'str' is equal to the sub string that shows from position 0 to the position of the new length of the input.

I hope it serves you.