定義圖案時檢測退格

Question

我正在爲我們的應用程序創建一個控件，允許它們屏蔽輸入。這是基於初始用戶以及他們如何設置的。它可以是任何他們想要的模式。

我有一段奇妙的代碼，除非你刪除你剛輸入的內容。如果人們是完美的，這將會發現，但我們不需要刪除我們剛輸入的內容。

所以我想知道是否有一種方法來檢測他們是否退格。

我的HTML看起來像

<p class="maskNum"> 
    <input type="text" class="form-control mask" autocomplete="off" maxlengthsocial="9" maxlength="11" /> 
    <input type="text" class="form-control maskval" autocomplete="off" maxlengthsocial="9" maxlength="9" /> 
</p> 

我的CSS看起來像

.maskNum { 
    position: relative; 
} 

.maskval { 
    position: absolute; 
    top: 0; 
    color: black; 
    background: transparent !important; 
    border: none; 
    left: 0; 
    -webkit-text-fill-color: transparent; //sets just the text color 
    height: 1.5em; 
} 

input { 
    height: 2em; 
    width: 50%; 
    border-radius: .5em; 
    padding-left: 0.5em; 
} 

和我的jQuery的樣子

var pattern = 'xxx-xx-0000'; 
var maxLength = pattern.length; 
var maxLenthNum = pattern.replace("-", "").length; 

$('.mask').attr('maxlength', maxLenthNum); 
$('.maskval').attr('maxlength', maxLength); 

$('.maskval').on('keyup keydown change', function() { 
    var input = $(this).val(); 
    var output = ""; 
    for (var x = 0; x < input.length; x++) { 
    if (x < pattern.length) { 
     output = pattern[x] == 'x' ? output + 'x' : output + input[x]; 
    } else 
     output += input[x]; 
    } 
    if (input.length < pattern.length && pattern[input.length] == '-') { 
    output += '-'; 
    $(this).val(output); 
    } else { 
    $(this).prev('input').val(output); 
    } 
}); 

和一個活生生的例子就http://codepen.io/zazvorniki/pen/XKNXJg所以你可以看到什麼正在發生。

Answer 1

看看this answer。您需要捕獲keyup/keydown事件，並且如果keyCode是8（或者，如果您還想要刪除鍵，則爲46），那麼請執行您需要的操作來處理退格。

基本上你需要添加適當的參數到事件處理函數中，並且在處理它之前檢查被按下的鍵是8還是46。

Answer 2

這是一個codepen示例。這是一個有點馬車，但可能會有幫助： http://codepen.io/KAPastor/pen/WxorYR

var pattern = 'xxx-xx-0000'; 
var maxLength = pattern.length; 
var maxLenthNum = pattern.replace("-", "").length; 

$('.mask').attr('maxlength', maxLenthNum); 
$('.maskval').attr('maxlength', maxLength); 

$('.maskval').on('keyup keydown change', function(e) { 

    var input = $(this).val(); 
    console.log(input) 
    var output = ""; 
    for (var x = 0; x < input.length; x++) { 
    if (x < pattern.length) { 
     output = pattern[x] == 'x' ? output + 'x' : output + input[x]; 
    } else 
     output += input[x]; 
    } 
    if (input.length < pattern.length && pattern[input.length] == '-') { 
    output += '-'; 
    $(this).val(output); 
    } else if (e.keyCode == 8 && output[output.length-1] == '-') { 

    console.log(output[output.length-1]) 
    output = output.substring(0,output.length-1) 
    console.log(output) 
    $(this).prev('input').val(output);     $(this).val(output); 

    //$(this).val(output); 
    }else{ 
    $(this).prev('input').val(output); 
    } 
}); 

到我們傳遞的情況下輸入「E」，然後望着鍵代碼== 8。在這種情況下，上面的回答類似的，我們需要調整掩碼刪除字符和「 - 」符號。

感謝， -K