패턴 정의시 백 스페이스 감지

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

다음은 codepen 예제입니다. 그것은 약간의 버그가 있지만, 도움이 될 수 위의 대답은 우리가이 경우 키 코드 == 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