πŸ»κ³°μ΄λ„€

κ°œλ°œκ΄€λ ¨/javascript&jquery

[Jquery/Javascript] ν•Έλ“œν°λ²ˆν˜Έ μ •κ·œμ‹ 및 숫자만 μž…λ ₯되게 ν•˜λŠ”λ²•

🐻곰이🐻 2022. 8. 2.
728x90

μ•ˆλ…•ν•˜μ„Έμš” κ°œλ°œμ‰½κ²Œν•˜μžκ³° μž…λ‹ˆλ‹€.

 

날씨가 많이 μš°μ€‘μΆ©ν•˜λ„€μš” μ–΄μ œλŠ” λ²ˆκ°œκΉŒμ§€ 치던데... ν›„ λ„ˆλ¬΄ μ°μ°ν•œ ν•˜λ£¨μ—μš” γ… γ… 

 

νšŒμ›κ°€μž…μ΄λ‚˜ λ”°λ‘œ ν•Έλ“œν° 번호λ₯Ό μž…λ ₯λ°›μ•„μ•Ό ν•  λ•Œ 많이 μ‚¬μš©λ˜λŠ” 방법에 λŒ€ν•΄ κ³΅μœ λ“œλ¦¬κ³ μž ν•©λ‹ˆλ‹€.

 

ν•Έλ“œν° 번호 검증과 μ •κ·œμ‹

μš°μ„  010/1234/5678 κ΄€λ ¨ν•΄μ„œ 각각 λ”°λ‘œ μž…λ ₯λ°›μ•„ ν•˜λ‚˜λ‘œ ν•©μΉ˜λŠ” κ±΄λ°μš” γ…Žγ…Ž

 

μ΄λ ‡κ²Œμš” γ…Žγ…Ž

 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>easy-developmentbear</title>
		<!-- 제이쿼리 -->
		<script src="https://code.jquery.com/jquery-latest.min.js"></script>
		<script>
			$(function(){
				$("button").on('click', function(){
					alert($("#phone1").val());
				});
			});
		</script>
	</head>

	<body>
		<input type="text" name="phone1" id="phone1" maxlength='3'>
		<input type="text" name="phone2" id="phone2" maxlength='4'>
		<input type="text" name="phone3" id="phone3" maxlength='4'>
		<button>좜λ ₯</button><br><br>
		<input type="text" name="phone_number" id="phone_number">
	</body>
</html>

μ΄λ ‡κ²Œ ν•˜λ‚˜μ”© 좜λ ₯ν•˜λ©΄μ„œ μ…€λ ‰ν„°λ₯Ό μž‘μ•„μ€λ‹ˆλ‹€.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>easy-developmentbear</title>
		<!-- 제이쿼리 -->
		<script src="https://code.jquery.com/jquery-latest.min.js"></script>
		<script>
			$(function(){
				$("button").on('click', function(){
					var phone1 = $("#phone1").val();
					var phone2 = $("#phone2").val();
					var phone3 = $("#phone3").val();
					
					//ν•„μˆ˜κ°’ 체크
					if(!phone1 || !phone2 || !phone3)
					{
						alert("ν•„μˆ˜κ°’ λˆ„λ½!");
						return false;
					}
					
					var phone_number = phone1 + phone2 + phone3;

					$("#phone_number").val(phone_number);

				});
			});
		</script>
	</head>

	<body>
		<input type="text" name="phone1" id="phone1" maxlength='3'>
		<input type="text" name="phone2" id="phone2" maxlength='4'>
		<input type="text" name="phone3" id="phone3" maxlength='4'>
		<button>좜λ ₯</button><br><br>
		<input type="text" name="phone_number" id="phone_number">
	</body>
</html>

ν•„μˆ˜ κ°’ 체크도 ν•΄μ€¬μŠ΅λ‹ˆλ‹€.

 

그런데 μ „ν™”λ²ˆν˜Έ 같은 κ²½μš°μ—” - (ν•˜μ΄ν”ˆ) 이 λΆ™μ–΄μ•Ό ν•œλ‹€λ©΄.

 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>easy-developmentbear</title>
		<!-- 제이쿼리 -->
		<script src="https://code.jquery.com/jquery-latest.min.js"></script>
		<script>
			$(function(){
				$("button").on('click', function(){
					var phone1 = $("#phone1").val();
					var phone2 = $("#phone2").val();
					var phone3 = $("#phone3").val();
					
					//ν•„μˆ˜κ°’ 체크
					if(!phone1 || !phone2 || !phone3)
					{
						alert("ν•„μˆ˜κ°’ λˆ„λ½!");
						return false;
					}
					
					var phone_number = phone1 + "-" + phone2 + "-" + phone3;

					$("#phone_number").val(phone_number);

				});
			});
		</script>
	</head>

	<body>
		<input type="text" name="phone1" id="phone1" maxlength='3'>
		<input type="text" name="phone2" id="phone2" maxlength='4'>
		<input type="text" name="phone3" id="phone3" maxlength='4'>
		<button>좜λ ₯</button><br><br>
		<input type="text" name="phone_number" id="phone_number">
	</body>
</html>

이런 μ‹μœΌλ‘œ ν•΄μ£Όλ©΄ λ©λ‹ˆλ‹€.

 

μ €λŠ” μ—¬κΈ°μ„œ input box에 숫자만 μž…λ ₯λ°›κ²Œλ” ν•˜κ² μŠ΅λ‹ˆλ‹€.

 

이 방법도 μ’‹μ§€λ§Œ 볡뢙에 μ·¨μ•½ν•©λ‹ˆλ‹€.

 

κ°€λ³κ²Œ λ³΄μ—¬λ“œλ¦¬μžλ©΄

μ΄λ ‡κ²Œ onkeyup이기에 킀업을 μ•ˆ ν•œ μƒνƒœλ‘œ μž…λ ₯ν•˜κ²Œ 되면 λ°›κ²Œ 되죠

 

μ €λŠ” 이런 뢀뢄듀이 μ‹«μ–΄μ„œ λ‹€λ₯Έ λ°©μ‹μœΌλ‘œ ν•˜λ €κ³  ν•©λ‹ˆλ‹€.

 

oninput을 μ“Έ κ²λ‹ˆλ‹€

 

 

oninputμ΄λž€?

 

 
 

oninput

oninput μ΄λ²€νŠΈλŠ” μš”μ†Œκ°€ μ‚¬μš©μž μž…λ ₯을 받을 λ•Œ λ°œμƒν•©λ‹ˆλ‹€.

이 μ΄λ²€νŠΈλŠ” <input> λ˜λŠ” <textarea> μš”μ†Œμ˜ 값이 변경될 λ•Œ λ°œμƒν•©λ‹ˆλ‹€.

ν•œλ§ˆλ””λ‘œ μž…λ ₯받을 μ¦‰μ‹œ onkeydownκ³Ό onkeyup사이?라고 μƒκ°ν•˜μ‹œλ©΄ λ©λ‹ˆλ‹€.

 

값이 λ“€μ–΄μ˜¬ λ•ŒλΌκ³  λ³΄μ‹œλ©΄ λ©λ‹ˆλ‹€.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>easy-developmentbear</title>
		<!-- 제이쿼리 -->
		<script src="https://code.jquery.com/jquery-latest.min.js"></script>
		<script>
			$(function(){
				$("button").on('click', function(){
					var phone1 = $("#phone1").val();
					var phone2 = $("#phone2").val();
					var phone3 = $("#phone3").val();
					
					//ν•„μˆ˜κ°’ 체크
					if(!phone1 || !phone2 || !phone3)
					{
						alert("ν•„μˆ˜κ°’ λˆ„λ½!");
						return false;
					}

					var phone_number = phone1 + "-" + phone2 + "-" + phone3;

					$("#phone_number").val(phone_number);

				});

			});
		</script>
	</head>

	<body>
		<input type="text" name="phone1" id="phone1" maxlength='3' oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
		<input type="text" name="phone2" id="phone2" maxlength='4' oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
		<input type="text" name="phone3" id="phone3" maxlength='4' oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
		<button>좜λ ₯</button><br><br>
		<input type="text" name="phone_number" id="phone_number">
	</body>
</html>

그리고 μ €λŠ” 010을 μž…λ ₯ν–ˆμ„ λ•Œ λ‹€μŒ inputbox둜 포컀싱 되게 μ²˜λ¦¬ν•΄λ³΄λ €κ³  ν•©λ‹ˆλ‹€. νŽΈν•˜λ‹ˆκΉŒμš”

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>easy-developmentbear</title>
		<!-- 제이쿼리 -->
		<script src="https://code.jquery.com/jquery-latest.min.js"></script>
		<script>
			$(function(){
				$("button").on('click', function(){
					var phone1 = $("#phone1").val();
					var phone2 = $("#phone2").val();
					var phone3 = $("#phone3").val();
					
					//ν•„μˆ˜κ°’ 체크
					if(!phone1 || !phone2 || !phone3)
					{
						alert("ν•„μˆ˜κ°’ λˆ„λ½!");
						return false;
					}

					var phone_number = phone1 + "-" + phone2 + "-" + phone3;

					$("#phone_number").val(phone_number);

				});

			});
			
		</script>
	</head>

	<body>
		<input type="text" name="phone1" id="phone1" maxlength='3' oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" onkeyup="if(this.value.length == 3) $('#phone2').focus();">
		<input type="text" name="phone2" id="phone2" maxlength='4' oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" onkeyup="if(this.value.length == 4) $('#phone3').focus();">
		<input type="text" name="phone3" id="phone3" maxlength='4' oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
		<button>좜λ ₯</button><br><br>
		<input type="text" name="phone_number" id="phone_number">
	</body>
</html>

 

포컀싱 처리 ν›„μž…λ‹ˆλ‹€.

 

κ°„λ‹¨νžˆ λ³΄μ—¬λ“œλ¦¬μžλ©΄

μ²˜μŒμ—” 3κΈ€μž μž…λ ₯ν•˜κ³  λ‹€μŒ 인풋 λ°•μŠ€λ‘œ λ‹€μŒμ—” 4κΈ€μž μž…λ ₯ μ‹œ μžλ™μœΌλ‘œ λ„˜μ–΄κ°€κ²Œ λ©λ‹ˆλ‹€.

 

쀑간점검 μ‹œκ°„

 

보고 κ³„μ‹œλŠ” μ—¬λŸ¬λΆ„λ“€λ„ ν•œλ²ˆ ν•΄λ³΄μ„Έμš” γ…Žγ…Ž

 

easy-developmentbear

 

κ·Έλ‹€μŒμ— ν•΄μ•Ό ν•˜λŠ” 것은 이게 μ§„μ§œ μ „ν™”λ²ˆν˜Έκ°€ λ§žλŠ”κ°€? μ•„λ‹Œκ°€? ν™•μΈμž…λ‹ˆλ‹€.

 

예λ₯Ό λ“€μ–΄ 089둜 μ‹œμž‘ν•˜λŠ” λ²ˆν˜ΈλŠ” μ—†μœΌλ‹ˆκΉŒμš”

 

μš°λ¦¬λ‚˜λΌ ν•Έλ“œν° λ²ˆν˜ΈλŠ” 010,016,011,017,018,019 정도가 μžˆκ² μŠ΅λ‹ˆλ‹€.

 

λ‹€ 바뀐닀고 ν–ˆλ˜ κ±° 같은데 ν˜Ήμ‹œλ‚˜.. ν˜Ήμ‹œλ‚˜ ν•΄μ„œ 검증을 ν•˜κ² μŠ΅λ‹ˆλ‹€.

 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>easy-developmentbear</title>
		<!-- 제이쿼리 -->
		<script src="https://code.jquery.com/jquery-latest.min.js"></script>
		<script>
			$(function(){
				$("#submit").on('click', function(){
					var phone1 = $("#phone1").val();
					var phone2 = $("#phone2").val();
					var phone3 = $("#phone3").val();
					
					//ν•„μˆ˜κ°’ 체크
					if(!phone1 || !phone2 || !phone3)
					{
						alert("ν•„μˆ˜κ°’ λˆ„λ½!");
						return false;
					}
					//μ •κ·œμ‹
					var regPhone = /^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$/;

					//번호 ν•©μΉ˜κΈ°
					var phone_number = phone1 + "-" + phone2 + "-" + phone3;
					
					//λ²ˆν˜Έκ²€μ¦
					if(!regPhone.test(phone_number))
					{
						alert("잘λͺ»λœ λ²ˆν˜Έμž…λ‹ˆλ‹€.");
						return false;
					}

					$("#phone_number").val(phone_number);

				});

			});
			
		</script>
	</head>

	<body>
		<input type="text" name="phone1" id="phone1" maxlength='3' oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" onkeyup="if(this.value.length == 3) $('#phone2').focus();">
		<input type="text" name="phone2" id="phone2" maxlength='4' oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" onkeyup="if(this.value.length == 4) $('#phone3').focus();">
		<input type="text" name="phone3" id="phone3" maxlength='4' oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
		<button id="submit">좜λ ₯</button><br><br>
		<input type="text" name="phone_number" id="phone_number">
	</body>
</html>

μœ„ μ½”λ“œλŠ” μ΅œμ’… μ½”λ“œμž…λ‹ˆλ‹€.

 

easy-developmentbear

μ „ν™”λ²ˆν˜Έκ°€ λ§žλŠ”μ§€ μ•„λ‹Œμ§€ ν™•μΈν•΄λ³΄μ‹œλ©΄ λ©λ‹ˆλ‹€.

 

μ΄λ ‡κ²Œ ν•Έλ“œν° 번호 μ •κ·œμ‹κ³Ό 숫자만 μž…λ ₯λ°›κ³  μžλ™ 포컀싱 μ²˜λ¦¬κΉŒμ§€ ν•΄λ΄€λŠ”λ°μš” γ…Žγ…Ž

 

λ‹€μŒμ— μ‹œκ°„ λ‚˜λ©΄ 이메일도 ν•΄λ΄μ•Όκ² μ–΄μš” μž¬λ°Œλ„€μš” μ •κ·œμ‹ μ•Œμ•„λ†“μœΌλ©΄ μ•Œμ•„λ‘˜μˆ˜λ‘ 쒋은..γ…Žγ…Ž

 

λ‹€μŒμ— 더 쒋은 μ •λ³΄λ‘œ μ°Ύμ•„λ΅κ²Œμš” γ…Žγ…Ž λ‹€λ“€ 쒋은 ν•˜λ£¨ λ³΄λ‚΄μ„Έμš”!

λ°˜μ‘ν˜•
μ €μž‘μžν‘œμ‹œ λΉ„μ˜λ¦¬ λ³€κ²½κΈˆμ§€

'κ°œλ°œκ΄€λ ¨ > javascript&jquery' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

Counter.js λ₯Ό μ¨μ„œ ν‹°μŠ€ν† λ¦¬ λΈ”λ‘œκ·Έ 방문자 수 μ• λ‹ˆλ©”μ΄μ…˜ 효과 λ„£κΈ°  (2) 2022.08.19
[Jquery/Javascript] μ²΄ν¬λ°•μŠ€ 전체 선택과 전체 ν•΄μ œ κ΅¬ν˜„ν•˜κΈ°  (0) 2022.08.02
[html/css/javascript/jquery] μ…€λ ‰ν„°(Selector) ν™œμš©λ²•!  (0) 2020.11.25
Javascript & Jquery / "onblur" μ†μ„±μœΌλ‘œ 1000λ‹¨μœ„ 콀마찍기!  (0) 2020.11.24
[Javascript/Jquery] 제이쿼리둜 천 λ‹¨μœ„ 콀마 (1,000) μ„Έμžλ¦¬λ§ˆλ‹€ 콀마찍기!  (0) 2020.11.24
javascript/jquery ν™œμš©ν•΄μ„œ κ°„νŽΈ 계산기 λ§Œλ“€κΈ°!  (0) 2020.11.24

λŒ“κΈ€

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”