보통 카드번호를 입력할 때, 16자리 중 가운데 8자리는 마스킹처리를 하게된다.
때문에 보통은 4자리씩 4개의 입력창을 만들어 가운데 8자리를 입력할 때는 키보드 보안까지 적용해서 처리하는 경우들이 많은데,
회사에서 1개의 Input에 12자리를 입력하면서 가운데 8자리는 마스킹이 되도록 구현하는데, 머리를 뜯고 계시는 분이 있어 내가 한 번 만들어 보았다.
개인적으로 jQuery를 극혐하지만... 도저희 쌩 js로는 구현이 어려워보여서...
(어차피 우리회사는 jQuery를 다들 사랑하시니...괜춘...)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form id="cardForm">
<label for="cardNumber">Card Number:</label><br>
<input type="text" id="cardNumber" name="cardNumber" maxlength="16" required><br>
<input type="hidden" id="originalCardNumber" name="originalCardNumber" required>
<input type="submit" value="Submit">
</form>
<div id="tmp"></div>
<script>
$(document).ready(function(){
var originalCardNumber = '';
$('#cardNumber').on('input', function(e) {
var cursorPosition = this.selectionStart;
var len = $(this).val().length;
var key = e.originalEvent.inputType;
if(key === "deleteContentBackward" || key === "deleteContentForward"){
originalCardNumber = originalCardNumber.substring(0, cursorPosition) + originalCardNumber.substring(cursorPosition + 1, originalCardNumber.length);
}else{
var char = $(this).val()[cursorPosition - 1];
if(!isNaN(char)){
originalCardNumber = originalCardNumber.substring(0, cursorPosition - 1) + char + originalCardNumber.substring(cursorPosition - 1, originalCardNumber.length);
}
}
var inputVal = originalCardNumber;
var maskedVal = '';
if(inputVal.length > 4) {
var postFix = (inputVal.length > 12) ? inputVal.substring(12) : '';
maskedVal = inputVal.substring(0, 4) + Array(Math.min(inputVal.length - 4, 8) + 1).join('*') + postFix;
} else {
maskedVal = inputVal;
}
$(this).val(maskedVal);
$('#originalCardNumber').val(originalCardNumber);
this.setSelectionRange(cursorPosition, cursorPosition);
});
$("#cardForm").submit(function(e){
e.preventDefault();
$("#tmp").text(originalCardNumber);
});
});
</script>
</body>
</html>
submit을 누르면 tmp라는 div 에 origin value가 출력되도록 했다.
그런데 하나 문제가 되는게, 드래그 후 삭제를해도 한개의 글자만 지워진다...
그건 이제 담당자가 알아서 처리하겠지...?
'Web' 카테고리의 다른 글
렌더링 방식에 대한 짧은 정리 (0) | 2023.05.31 |
---|---|
Maven? Gradle? 빌드도구에 대해 알아보자 (2) | 2023.05.15 |