• HTML
  • JS
  • J볃교

JQUERY 와 JS(KEYCODE)를 이용한 INPUT[TYPE="NUMBER"] 숫자만 입력가능하게 하기 (업데이트 0.1)

2019-06-13 244

설명

  • 카카오톡 링크

JQUERY 와 JS(KEYCODE)를 이용한 INPUT[TYPE="NUMBER"] 숫자만 입력가능하게 하기

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<script type="text/javascript">
	$(document).ready(function() {
		$("input[type='number']").keydown(function (e) {
			// Allow: backspace, delete, tab, escape, enter and .
			if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
				// Allow: Ctrl/cmd+A
				(e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
				// Allow: Ctrl/cmd+C
				(e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) ||
				// Allow: Ctrl/cmd+X
				(e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) ||
				// Allow: home, end, left, right
				(e.keyCode >= 35 && e.keyCode <= 39)) {
				// let it happen, don't do anything
				return;
			}
			// Ensure that it is a number and stop the keypress
			if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
				e.preventDefault();
			}
		});

		$(".onlyNumber").keyup(function(event){
			var inputVal = $(this).val();
			$(this).val(inputVal.replace(/[^0-9]/gi,''));
		});
	});
</script>
<style type="text/css">
	/* 오른쪽에 위아래 버튼 없애기 */
	input[type=number]::-webkit-outer-spin-button,
	input[type=number]::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	input[type=number] {
		-moz-appearance:textfield;
	}

</style>

<input type="number" name="" id="" value="" title="" />

<input type="text" name="" id="" value="" title="" class="onlyNumber" />