Javascript JQuery를 이용하여 금액 입력 필드에 숫자만 입력하게 하고 입력 후 콤마 표시를 하게 하는 방법입니다.
DB 또는 파라미터로 받은 숫자를 PHP함수로 콤마를 넣는 방법입니다.
INPUT 필드에 onkeyup 이벤트 발생 시 정규식을 이용, 숫자가 아닌 값은 지워버리게 합니다.
onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"
INPUT 필드를 빠져 나갈 때 Blur 이벤트 발생 시 정규식을 이용하여 콤마가 들어가게 처리를 합니다.
<script>
$('#amt').blur(function()
{
var str = $("#amt").val();
str = str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,')
$("#amt").val(str);
});
</script>
PHP의 number_format을 사용하게 되면 숫자 데이터에 콤마가 들어가서 출력을 하게 됩니다.
number_format($amt)
number_format
(PHP 4, PHP 5, PHP 7)
number_format — Format a number with grouped thousands
Description
number_format ( float $number [, int $decimals = 0 ] ) : string
number_format ( float $number , int $decimals = 0 , string $dec_point = "." , string $thousands_sep = "," ) : string
This function accepts either one, two, or four parameters (not three):
If only one parameter is given, number will be formatted without decimals, but with a comma (",") between every group of thousands.
If two parameters are given, number will be formatted with decimals decimals with a dot (".") in front, and a comma (",") between every group of thousands.
If all four parameters are given, number will be formatted with decimals decimals, dec_point instead of a dot (".") before the decimals and thousands_sep instead of a comma (",") between every group of thousands.
Parameters
number
The number being formatted.
decimals
Sets the number of decimal points.
dec_point
Sets the separator for the decimal point.
thousands_sep
Sets the thousands separator.
Return Values
A formatted version of number.
Changelog
VersionDescription
| 7.2.0 | number_format() was changed to not being able to return -0, previously -0 could be returned for cases like where number would be -0.01. |
| 5.4.0 | This function now supports multiple bytes in dec_point and thousands_sep. Only the first byte of each separator was used in older versions. |
Examples
<?php
$number = 1234.56;
// english notation (default)
$english_format_number = number_format($number);
// 1,235
// French notation
$nombre_format_francais = number_format($number, 2, ',', ' ');
// 1 234,56
$number = 1234.5678;
// english notation without thousands separator
$english_format_number = number_format($number, 2, '.', '');
// 1234.57
?>
소스 전문입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form>
<input type="text" id="amt" name="amt" value="<?= number_format($amt) ?>" class="form-control" placeholder="금액을 입력하세요." onkeyup="this.value=this.value.replace(/[^0-9]/g,'');">
<script>
$('#amt').blur(function()
{
var str = $("#amt").val();
str = str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,')
$("#amt").val(str);
});
</script>
</form>
</body>
</html>'유용한 활용팁' 카테고리의 다른 글
| 구글 메일에서 네이버 메일 POP3를 연동하여 보는 방법 (0) | 2020.09.15 |
|---|---|
| 까페24 호스팅 아파치 서버 .htaccess로 INDEX 페이지 설정 방법 (0) | 2020.09.14 |
| 갤럭시 노트10 플러스 5G(SM-N976N) 캘린더 사용을 위한 네이버 캘린더를 구글 캘린더로 이관하기-연동 안됨 (0) | 2020.09.03 |
| 엑셀 COUNTIF함수를 이용하여 원하는 조건값만 COUNT하기 - 0인 값 COUNT 제외 방법 (2) | 2020.09.01 |
| 네이버 스마트스토어 IBK 중소기업은행에서 사업자 통장 개설 방법 - 한도계좌 아님 (3) | 2020.08.31 |