카드 번호 정규식 및 캐럿/커서 위치 (자바 스크립트)

Question

4 자리 4 그룹으로 신용 카드 번호를 나눌 정규식이 있습니다.

Regex는 대위법을 사용하지만 문자열로 돌아가서 편집하려는 경우 커서가 선택 영역의 끝으로 이동합니다.

<input id= "cardNumber" maxlength="19" type="tel"/> 

JS 다음과 같이

document.getElementById('cardNumber').addEventListener('input', function (e) { 

var field = e.target; 

field.value = field.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim(); 

}); 

은 분명히 나는 ​​커서가 항목의 끝으로 이동하고 싶지 않아요. 나는 캐럿 위치, selectionStart 및 End로 놀고 있었지만 지금까지는 행운이 없습니다.

모든 포인터가 많이 감사하겠습니다.

는 jsfiddle 여기 참조 : https://jsfiddle.net/oo7Ljm4j/1/

Answer 1

오케이 그래서 약간 파고 들자 나는 대답을 찾았습니다!

field.selectionEnd를 사용하고 모든 (켜짐) 입력에서이 값을 재설정하면 커서를 편집 할 위치로 유지합니다.

문제는 정규식이 변경 될 때 정규식 필드를 다시 렌더링하고 업데이트한다는 사실에서 유래합니다 (따라서 커서가 정규식으로 변경 될 때 커서가 기본값의 끝으로 지정됨). 브라우저는 모든 시간을 완료 생각한다.)

document.getElementById('cardNumber').addEventListener('input', function (e) { 

    var field = e.target, position = field.selectionEnd, length = field.value.length; 


    field.value = field.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim(); 


    field.selectionEnd = position += ((field.value.charAt(position - 1) === ' ' && field.value.charAt(length - 1) === ' ') ? 1 : 0);  
}); 

이 방법은 우리가 모든 입력에 위치를 지정한 selectionEnd있어 다시 계산 커서를 말하는 것입니다.

작동중인 JSFiddle aqui를 확인하십시오. https://jsfiddle.net/oo7Ljm4j/6/

Answer 2

키 다시는 하나 개를 눌러 경우 그냥 확인의 keyup 사용할 수 있습니다

아무것도를하지 않는다

document.getElementById('cardNumber').addEventListener('keyup', function (e) { 
    var key = event.which || event.keyCode || event.charCode; 
    var field = e.target; 
    if (key !== 8) { 
    field.value = field.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim(); 
    } 
}); 

DEMO

또는

만들 수 있습니다 이 함수를 사용하여 텍스트 입력의 모든 키 이벤트에서 완전히 비활성화 된 비 정수형 char 및 pr 이벤트 붙여 넣기가 아닌 정수 문자

document.getElementById('cardNumber').addEventListener('keyup', format); 
document.getElementById('cardNumber').addEventListener('keydown', format); 
document.getElementById('cardNumber').addEventListener('copy', format);  
document.getElementById('cardNumber').addEventListener('keypress', format); 

function format(e) { 
    var key = event.which || event.keyCode || event.charCode; 
    var field = e.target; 
    if (key !== 8) { 
     field.value = field.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim(); 
    } 
} 

ALSO

DEMO

이 경우

(key < 37 || key > 39) 

이 있으므로 조건이

if (key !== 8 && (key < 37 || key > 39)) { 
    field.value = field.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim(); 
} 

처럼 될 것입니다이 조건을 추가 할 경우 당신이 화살표를 받아 들일 수 DEMO