[SimpleExample] 전화번호 뒤 4자리 '****'

 

 

 

 

1. 전화번호중 마지막 4자리는 숨김처리

2. 11자리 넘어가면 더이상 입력 안되도록

3. 출력도 입력된 전화번호만 나오도록

* 실제로 써먹을 용도가 아닙니다 순수하게 연습용입니다.

* 실제 처리할때는 정규표현식을 사용합니다.

* 숫자는 input 속성의 maxlength 가 안먹힙니다.

 

html

 

<div class="wrap">

<span class="view js-view"></span>

<form>

<input

maxlength="10"

type="number"

name="phonnumber"

placeholder="전화번호를 입력하세요"

class="number js-number"

>

</form>

</div>

 

css

 

html, body {

background: #333333;

height:100%;

}

.wrap {

display:flex;

justify-content:center;

height:100%;

align-items:center;

flex-direction: column;

}

.wrap form .number {

border:1px solid #cccccc;

border-radius:5px;

font-size:14px;

padding:0.5rem;

}

.wrap .view {

color:white;

margin-bottom:10px;

font-size:20px;

}

js

 

var elInput = document.querySelector('.js-number');

var view = document.querySelector('.js-view');

var jsSwitch = document.querySelector('.js-switch');

elInput.addEventListener("keyup", function(e) {

let phoneNumber = e.target.value; // 전화번호

let phoneLength = phoneNumber.length; // 전화번호 길이

// 뒤에 4자리는 **** 처리하는 삼항연산자

phoneLength > 7 ? view.innerText += "*" : view.innerText = phoneNumber;

// 풀넘버의 입력 여부 확인

if(phoneLength === 11) {

elInput.readOnly = true;

}

// input이 읽기전용이 될때 수정버튼 나타남

if(elInput.readOnly) {

jsSwitch.style.display = "block";

} else {

jsSwitch.style.display = "none";

}

});

// input 이 읽기 전용이 되면 수정버튼 생성

jsSwitch.addEventListener('click', function() {

elInput.readOnly = false;

elInput.focus();

});

 

잘 되는데 딱 한가지 문제점이 * 표시해주는 부분인데 지울때도 7자 이하이면 *이 붙는다

 

이부분에 대한 처리가 지금 생각이 안나서

 

추후 위의 코드를 함수로 객체화시켜서 분리하는 작업을 하면서 그 부분도 수정을 해 보려고 한다.

 

 

 

code-reading 블로그에 방문해 주셔서 환영합니다.
댓글은 모두 환영하니 많이 달아주세요.