๊ฐœ๋ฐœ๊ด€๋ จ/javascript&jquery

Javascript & Jquery / "onblur" ์†์„ฑ์œผ๋กœ 1000๋‹จ์œ„ ์ฝค๋งˆ์ฐ๊ธฐ!

๐Ÿป๊ณฐ์ด๐Ÿป 2020. 11. 24.
728x90

์•ˆ๋…•ํ•˜์„ธ์š” ๊ฐœ๋ฐœ์‰ฝ๊ฒŒํ•˜์ž๊ณฐ ์ž…๋‹ˆ๋‹ค.

 

์•„๊นŒ ์˜ฌ๋ ธ๋˜ ๋ฒ„ํŠผ์„ ์ด์šฉํ•œ ์ฝค๋งˆ์ฐ๊ธฐ ๋ณด์—ฌ๋“œ๋ ธ์ฃ ~~ใ…Žใ…Žใ…Ž

 

๊ทธ๋ƒฅ ์ƒ๊ฐ๋‚˜์„œ ์ด๋ฒˆ์—” onblur ์†์„ฑ์„ ํ™œ์šฉํ•˜์—ฌ ์ˆซ์ž ์ž…๋ ฅ ํ›„ onblur ์ƒํƒœ๊ฐ€ ๋˜์—ˆ์„๋•Œ ์ฝค๋งˆ๋ฅผ ์ฐ์–ด์ฃผ๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

 

์ตœ์ข… ์ฝ”๋“œ ์ž…๋‹ˆ๋‹ค.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>๊ฐœ๋ฐœ์‰ฝ๊ฒŒํ•˜์ž๊ณฐ</title>
<!-- ์ œ์ด์ฟผ๋ฆฌ -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
	//blur์†์„ฑ์œผ๋กœ focus๊ฐ€ ํ•ด์ œ๋˜์—ˆ์„๋•Œ ์ฝค๋งˆ์ฐ๊ธฐ
	function n_format(val)
	{
		var result = numberformat(val);

		$("#num").val(result);
	}
	//์ฒœ ๋‹จ์œ„ ์ฝค๋งˆ ์ฐ์–ด ์ถœ๋ ฅํ•˜๊ธฐ
	function numberformat(double) 
	{
		double = double.replace(/[^0-9]/g,'');
		var parts = double.toString().split(".");

		parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");

		return parts.join(".");
	}
</script>
</head>
	<body>
		<input type="text" id="num" onblur="n_format(this.value); return false;" style="margin-left:90px;">
	</body>
</html>

์ตœ์ข…์ฝ”๋“œ๋Š” ์ ‘์–ด๋‘๊ณ 

 

onblur ์†์„ฑ์„ ์‚ดํŽด๋ณด์ž๋ฉด 

 

input ํƒœ๊ทธ์— ์ž…๋ ฅํ• ๋•Œ์— ์ปค์„œ๋Š” input ์ฐฝ์— ์žˆ์Šต๋‹ˆ๋‹ค.

 

๊ทธ ์ปค์„œ๊ฐ€ ๋น ์ ธ๋‚˜์˜ฌ๋•Œ๋ผ๊ณ  ๋ณด์‹œ๋ฉด ๋ ๊ฒƒ๊ฐ™์Šต๋‹ˆ๋‹ค.

 

ํ•ด๋‹น ์ปค์„œ๊ฐ€ ๋น ์ ธ๋‚˜์˜ฌ๋•Œ ์‹คํ–‰ํ•œ๋‹ค ์ด๋Ÿฐ์‹์œผ๋กœ ์•Œ๊ณ ๊ณ„์‹œ๋ฉด ์ข‹์„๊ฒƒ๊ฐ™์•„์š”.

 

์ง์ ‘ํ•ด๋ณด์‹ค์ˆ˜์žˆ๊ฒŒ ์ถ”๊ฐ€ํ•ด๋†“์„๊ฒŒ์š” ใ…Žใ…Ž

 

๊ฐœ๋ฐœ์‰ฝ๊ฒŒํ•˜์ž๊ณฐ

 

๋” ์œ ์ตํ•œ ์ •๋ณด๋กœ ์ฐพ์•„๋ต๊ฒŒ์š”~

 

๊ถ๊ธˆํ•˜์‹  ์  ๋Œ“๊ธ€ ๋‚จ๊ฒจ์ฃผ์‹œ๊ตฌ ๊ตฌ๋…๋„ ๋ˆŒ๋Ÿฌ์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค~

 

๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€