728x90
๋ฐ์ํ
JavaScript
์ซ์ 3์๋ฆฌ๋ง๋ค ์ฝค๋ง ํ์ํ๊ธฐ
์๋ฐ์คํฌ๋ฆฝํธ JS
/
" ์ซ์๋ฅผ ํ์ํ ๋ 3์๋ฆฌ๋ง๋ค ์ฝค๋ง๊ฐ
ํ์๋์์ผ๋ฉด ์ข๊ฒ ์ ๋ ์ฌ์ฉํ๋ ์ฝ๋.โ๏ธ
๊ฐ์ฅ ์ฌ์ด ๋ฐฉ๋ฒ์ toLocaleString()์ ์ฌ์ฉํ๋ ๊ฒ์ ๋๋ค.๐"
/
โฌ๏ธโฌ๏ธโฌ๏ธ์ซ์ ์ฝค๋ง ๊ตฌํโฌ๏ธโฌ๏ธโฌ๏ธ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>toLocaleString()</title>
<!-- font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
<!-- css -->
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
word-break: break-all;
font-family: 'Montserrat', "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}
input {
width: 40rem;
height: 3.5rem;
border-radius: 5px;
padding-left: 1rem;
border: 2px solid #009b2e;
background: #f2f2f2;
}
h2 {
color: #009b2e;
margin: .6rem 0;
}
.box>div {
margin: 2rem 1rem;
}
</style>
</head>
<body>
<div class="box">
<div>
<h2>⇣ ์ซ์๋ฅผ ์
๋ ฅํ๋ฉด ์๋์ผ๋ก 3์๋ฆฌ๋ง๋ค ์ฝค๋ง๊ฐ ํ์๋ฉ๋๋ค ⇣</h2>
<input type="text" oninput="formatPrice(this)">
</div>
<div></div>
</body>
<script>
const formatPrice = (target) => {
// ์ซ์๋ง ๋จ๊ธด ํ, ํฌ๋งท
target.value = Number(target.value
.replace(/[^0-9]/g, ''))
.toLocaleString();
}
</script>
</html>
728x90
๋ฐ์ํ
'๐ปCoding > ๐ JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| JavaScript ์ซ์ ์นด์ดํธ ์ ๋๋ฉ์ด์ ๋ง๋ค๊ธฐ | ์๋ฐ์คํฌ๋ฆฝํธ JS (0) | 2023.03.15 |
|---|---|
| javascript_if_์กฐ๊ฑด๋ฌธ (0) | 2021.10.28 |
| JavaScript _HTML ์ปจํ ์ธ ๋ฅผ ๋ณ๊ฒฝํ๊ธฐ (0) | 2021.08.26 |
| JavaScript _ ์๋ฐ์คํฌ๋ฆฝํธ ์์ฑ ์์น์ ์ฐ๊ฒฐ๋ฐฉ๋ฒ (0) | 2021.08.23 |
| JavaScript _๋ฌธ๋ฒ + (์๋ฐ์คํฌ๋ฆฝํธ ๋ง๋ณด๊ธฐ) (0) | 2021.08.19 |