Easiest Way to Mask Characters in Html(5) Text Input

Easiest way to mask characters in HTML(5) text input

Look up the new HTML5 Input Types. These instruct browsers to perform client-side filtering of data, but the implementation is incomplete across different browsers. The pattern attribute will do regex-style filtering, but, again, browsers don't fully (or at all) support it.

However, these won't block the input itself, it will simply prevent submitting the form with the invalid data. You'll still need to trap the onkeydown event to block key input before it displays on the screen.

Masking input characters without type=password

Firstly, autocomplete = "off" should be on the <form> element, not the individual fields. This is because browsers typically store the values for all fields in a given form together (eg to allow for saving multiple username/password combinations for the same site).

Set it in the form, and it should work just fine for you. (although passwords already saved will typically still be auto-completed, so clear your password store before testing)

However, I would suggest that you're probably chasing the wrong target if this is considered a security concern.

The reason browsers offer this feature is because users want to be able to store their login credentials. Preventing them from doing so won't stop them wanting to, and if users really want to, there are still a number of ways they can get around it -- there are browser plug-ins explicitly designed to kill thew autocomplete = "off" feature and allow all passwords to be saved.

How your user stores the password at their end is ultimately not your security concern, and not something you really have any control over anyway.

In fact, if we prevent people from storing their passwords, it is more likely that they will use the same password in multiple places (simply because people don't have the capacity to remember different passwords for every site they use), so by preventing them from saving it, you might actually be making your users' passwords less secure.

If your site has a genuine need for security that cannot allow a password to be saved, then you will need to consider an alternative mechanism entirely. For example, bank logins these days often require users to enter specific numbered characters from their password -- eg "Please enter the fifth, eighth and twelfth characters from your password".

However, these schemes are more aimed at securing the transmission of the password rather than the storing of it: by only entering certain given characters, we don't have to input or transmit the entire password at all, so there is no chance of it being hacked en-route. It is still assumed that the user will probably have the password noted down somewhere (especially if they have to work out which is the twelfth character in the string)

This kind of scheme can be a real pain for users, but does offer a genuine level of login security without having to actually input or transmit the password. The additional level of difficulty it adds to the login process, however, means that only really high-security sites like banks are likely to use this kind of scheme over a regular password.

Masking input value after showing a few characters

Here I've keep a track of original text, and inside the edit I change chars after 3 into password char.

The proper password is then stored inside a data attribute data-orig, that you can then read when you submit data.

const i = $("input");
i.on("input", function () {  const $t = $(this);  const orig = $t.attr("data-orig") || "";    const v = $t.val().split("");  for (l = 1; l < orig.length && l < v.length; l += 1) {    v[l] = orig[l];  }  $t.attr("data-orig", v.join(""));  for (l = 3; l < v.length; l += 1) {    v[l] = "●";  }  $t.val(v.join(""));  });
$("button").on("click", function () {  console.log(i.attr("data-orig"));});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input type="text">
<button>Get pwd</button>

function limit(element)
{
    var max_chars = 2;

    if(element.value.length > max_chars) {
        element.value = element.value.substr(0, max_chars);
    }
}

<input type="number" onkeydown="limit(this);" onkeyup="limit(this);">

var max_chars = 2;

$('#input').keydown( function(e){
    if ($(this).val().length >= max_chars) { 
        $(this).val($(this).val().substr(0, max_chars));
    }
});

$('#input').keyup( function(e){
    if ($(this).val().length >= max_chars) { 
        $(this).val($(this).val().substr(0, max_chars));
    }
});

<input type="number" id="input">

<input type="email" />

<input type="text" name="dutch_zip_code" pattern="[A-Za-z]{4}[0-9]{2}" />

<html>
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script type="text/javascript" src="jquery.mask.js"></script>
</head>
<body>
<input type="text" name="dutch_zip_code" data-validation-type="dutch_zip_code" />

<script>
$(document).ready(function()
{
    $('input[type=text]').each( function()
                           {
                               var type = $(this).data('validation-type');

                               if (type == 'dutch_zip_code')
                               {
                                   $(this).attr('pattern', '[A-Za-z]{4}[0-9]{2}');
                                   //
                                   // Use jquery mask plugin:
                                   // https://plugins.jquery.com/mask/
                                   //
                                   $(this).mask('0000SS');
                               }
                           }
                         );
});
</script>
</body>
</html>

document.querySelector('[name=txtName]').addEventListener('input',function(){    this.value = this.value.replace("'", '');});

<div class="col-md-4">  <input name="txtName" type="text"  class="form-control" placeholder="Name"></div>