Programming/JavaScript, Sencha

JavaScript : Input 박스 숫자만 입력

파란크리스마스 2024. 8. 1. 11:47
728x90

HTML 소스

input 박스에 inputtype="number" 속성 추가

<form id="frmElMember" onsubmit="return submitCheckIt()">
  <input name="applied_power" inputtype="number">
</form>

JavaScript 소스

$(document).ready(function() {
	
	// input 박스의 key 눌러 졌을때 이벤트
	$('input[inputtype="number"]').on('change, keyup', function() {
		var value = $(this).val();
		// 숫자를 제외한 문자 제거
		var value = value.replace(/[^0-9]/g, '');
		// 3자리 단위로 콤마(,) 추가
		value = value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
		$(this).val(value);
	});

    // Input 박스의 값을 3자리 단위로 콤마(,) 추가
	var inputNumber = $('input[inputtype="number"]');
	inputNumber.each(function (index, item) {
		var value = $(item).val();
		var value = value.replace(/[^0-9]/g, '');
		value = value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
		$(item).val(value);
	});
});

// submit 체크 - submit시 콤마 제거
function submitCheckIt() {
	var inputNumber = $('input[inputtype="number"]');
	inputNumber.each(function (index, item) {
		var value = $(item).val();
		var value = value.replace(/[^0-9]/g, '');
		$(item).val(value);
	});
	
	return true;
}