검색결과 리스트
textbox에 해당되는 글 1건
- 2012.08.10 [CrossBrowser] TextBox에 숫자만 입력허용
글
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
IE, Firefox, Safari, Chrome에서 잘 적용되고 Opera에서는 영문은 입력되지 않으나 한글이 입력된다.
왜냐하면 Opera에서는 ime-mode css가 먹지 않기 때문인데, 이 부분은 추후 연구하여 추가로 등록하겠다.
우선 Opera는 alert을 띄워서 한글의 입력을 막도록 했다.
function onlyNumber(e)
{
var keyCode = "";
if(window.event)
keyCode = window.event.keyCode;
else
keyCode = e.which;
if((keyCode >= 48 && keyCode <=57) || (keyCode >= 96 && keyCode <= 105) || keyCode == 8 || keyCode == 9 || keyCode == 13 || keyCode == 46) {
return true;
}
else {
if(navigator.appName == "Opera")
{
alert("숫자만 입력할 수 있다.");
e.preventDefault();
return false;
}
if(window.event)
window.event.returnValue = false;
else
{
e.preventDefault();
}
}
}
<input type="text" style="ime-mode:disabled;" onKeyDown="onlyNumber(event);" onContextMenu="return false;">
수정) 2014.08.21
위에 함수가 제대로 동작했던 것으로 기억하는데, 지금 해보니 제대로 동작하지 않아 아래와 같이 수정하였다.
function onlyNumber(e) {
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === 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();
}
}
<input type="text" style="ime-mode:disabled;" onKeyDown="onlyNumber(event);" onContextMenu="return false;">
왜냐하면 Opera에서는 ime-mode css가 먹지 않기 때문인데, 이 부분은 추후 연구하여 추가로 등록하겠다.
우선 Opera는 alert을 띄워서 한글의 입력을 막도록 했다.
function onlyNumber(e)
{
var keyCode = "";
if(window.event)
keyCode = window.event.keyCode;
else
keyCode = e.which;
if((keyCode >= 48 && keyCode <=57) || (keyCode >= 96 && keyCode <= 105) || keyCode == 8 || keyCode == 9 || keyCode == 13 || keyCode == 46) {
return true;
}
else {
if(navigator.appName == "Opera")
{
alert("숫자만 입력할 수 있다.");
e.preventDefault();
return false;
}
if(window.event)
window.event.returnValue = false;
else
{
e.preventDefault();
}
}
}
<input type="text" style="ime-mode:disabled;" onKeyDown="onlyNumber(event);" onContextMenu="return false;">
수정) 2014.08.21
위에 함수가 제대로 동작했던 것으로 기억하는데, 지금 해보니 제대로 동작하지 않아 아래와 같이 수정하였다.
function onlyNumber(e) {
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === 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();
}
}
<input type="text" style="ime-mode:disabled;" onKeyDown="onlyNumber(event);" onContextMenu="return false;">
수정) 2018.03.14
과거에 style="ime-mode:disabled"가 크롭에서도 적용되었었는데, 최근의 크롬에서는 이 스타일을 지원하지 않는다. 그래서 한글이 입력되는 현상이 일어난다.
또한, onlyNumber함수로는 한글을 구분할 수 없어서 아래와 같이 변경하였다.
function removeChar(event) {
event = event || window.event;
event.target.value = event.target.value.replace(/[^0-9]/g, "");
}
<input type="text" onKeyDown="onlyNumber(event);" onKeyUp="removeChar(event);" onContextMenu="return false;">
'-- JavaScript' 카테고리의 다른 글
| Google Maps API & Marker Clusterer (0) | 2012.08.21 |
|---|---|
| Javascript 일반전화, 휴대폰, 이메일 Validation (0) | 2012.08.16 |
| [CrossBrowser] Copy & Paste 방지 (0) | 2012.06.21 |
| [CrossBrowser] 팝업 닫기 (0) | 2012.06.21 |
| Javascript OOP개념 (0) | 2012.02.20 |
RECENT COMMENT