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 |