パターンを定義するときにバックスペースを検出する

Question

入力をマスクすることができるアプリケーションのコントロールを作成しています。これは、初期ユーザーとその設定方法に基づいています。彼らが望むどんなパターンでもよい。

私は、あなたが今入力したものを削除する場合を除いて、すばらしい働きをするコードを持っています。これは人々が完璧だった場合には見つかるでしょうが、私たちがちょうどタイプしたものを削除する必要はありません。

だから、バックスペーシング時に検出する方法があるのだろうかと思います。

が

<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ので、あなたが正確に何を見ることができるように

私のhtmlが見えます起こっている。

Answer 1

this answerをご覧ください。 keyup/keydownイベントをキャプチャする必要があります。keyCodeが8（または削除キーも必要な場合は46）の場合は、バックスペースを処理するために必要な処理を行います。

基本的には、既に持っているイベントハンドラ関数に適切なパラメータを追加し、処理する前に押されたキーが8か46かどうかを確認する必要があります。

Answer 2

ここにコードサンプルがあります。それは少しバギーですが、役立つことがあります。 我々は調整する必要があり、その場合にはキーコード== 8を見て、その後、イベント入力「e」を渡している上記の回答と同様に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); 
    } 
}); 

マスクを使用して、文字と " - "記号の両方を削除します。

おかげで、 -K