js 핸드폰 번호 4 자리 스페이스 바,카드 4 자리 마다 스페이스 바 효과
누 군 가 는 두 개의 input 으로 이 루어 집 니 다.하 나 는 데 이 터 를 입력 하 는 것 을 책임 지지 만 투명 하 게 보이 지 않 습 니 다.다른 하 나 는 인터페이스 에 전시 되 어 변 형 된 것 으로 이 수 요 를 해결 하 였 습 니 다.(핸드폰 에서 디지털 키 보드 를 호출 할 수 있 습 니 다)
이번 에는 demo 를 교묘 하 게 써 서 하나의 input 로 입력 한 문 자 를 계속 조회 하여 입력 한 데 이 터 를 판단 합 니 다.(숫자 키 보드 를 직접 호출 할 수 없습니다.안에 빈 칸 이 있 기 때 문 입 니 다)
은행 카드번호 라면 문자 판단 길 이 를 실제 수요 에 따라 길 이 를 판단 할 수 있다.
lastLen === 5 || lastLen === 10 || lastLen === 15|| lastLen === 20
말 이 많 지 않 으 면 코드 를 달 아 라.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<title>Title</title>
</head>
<body>
<input type="text" id="telphone"><span id="err"></span>
<script>
var telphone = document.getElementById('telphone');
var err = document.getElementById('err');
//
var firstLen = 0;
var lastLen = 0;
var re=/^1(3|4|5|7|8)\d{9}$/;
telphone.oninput = function () {
telphone.value = telphone.value.substr(0, 13);// 11 +2
// 11
if(telphone.value.length==13){
//
if(!re.test(telphone.value.replace(/\s/g, ''))){
err.innerHTML=' '
} else{
err.innerHTML=''
}
}else{
err.innerHTML=''
}
}
telphone.onfocus = function () {
timer = setInterval(function () {
lastLen = telphone.value.length;
if (lastLen > firstLen) {
firstLen = telphone.value.length;
if (lastLen === 4 || lastLen === 9) {
var temp1 = telphone.value.substr(0, telphone.value.length - 1);
var temp2 = telphone.value.substr(telphone.value.length - 1);
telphone.value = temp1 + ' ' + temp2;
}
} else if (lastLen <= firstLen) {
if (lastLen === 4 || lastLen === 9) {
telphone.value = telphone.value.substr(0, telphone.value.length - 1);
}
firstLen = telphone.value.length;
}
}, 10);// ，
}
</script>
</body>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
