Маска какая-то цифра номера кредитной карты в формате пароля

Question

Я пытаюсь замаскировать номер кредитной карты в формате пароля в текстовом поле.

**** **** **** 1234

Кто-нибудь знает окончательного, надежный способ, чтобы найти это?

Answer 1

Ну, вы могли бы сделать первые три входных типа к типу пароля и последнего, чтобы быть текст:

function input_onchange(me) { 
 
    if (me.value.length < me.getAttribute('maxlength') - 1) { 
 
     return; 
 
    } 
 
    var i; 
 
    var elements = me.form.elements; 
 
    for (i = 0, numElements = elements.length; i < numElements; i++) { 
 
     if (elements[i] == me) { 
 
      break; 
 
     } 
 
    } 
 
    elements[i + 1].focus(); 
 
}

<form action="post.php" method="post" accept-charset="utf-8"> 
 
    <input type="password" value="" id="first" size="4" maxlength="4" 
 
     onkeypress="input_onchange(this)"/> 
 
    <input type="password" value="" id="second" size="4" maxlength="4" 
 
     onkeypress="input_onchange(this)"/> 
 
    <input type="password" value="" id="third" size="4" maxlength="4" 
 
     onkeypress="input_onchange(this)"/> 
 
    <input type="text" value="" id="fourth" size="4" maxlength="4"/> 
 
    <p><input type="submit" value="Send Credit Card"></p> 
 
</form>

Answer 2

Если вы хотите сохранить все номера в одном input, вы можете сделать что-то вроде этого:

$("#ccNr").keydown(function(e){ 
 
    if(e.keyCode != 8){ 
 
    var length = $(this).val().replace(/ /g,"").length; 
 
    if(length < 12){ 
 
     var val = ""; 
 
     for(var i = 0; i < length + 1; i++){ 
 
     \t val+="*"; 
 
     \t if((i+1)%4 == 0){ 
 
      val+=" "; 
 
      } 
 
     } 
 
     $(this).val(val); 
 
    } 
 
    if(length < 12 || length >= 16){ 
 
     e.preventDefault();  
 
    } 
 
    } 
 
});

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

Это, безусловно, может быть улучшено. Я просто хотел проиллюстрировать эту идею. Главное - переопределить поведение по умолчанию события keydown. Проверка e.keyCode != 8 гарантирует, что нажатая клавиша не является backspace ключом. Вы должны, вероятно, проверить и другие ключи, если вы собираетесь использовать это. Кроме того, вы можете игнорировать нечисловые значения.