[input]input에 한글이 입력안되게 하고 싶을때, 숫자만 입력되게

input text 타입을 사용하면 문자 전체가 작성된다.

그래서 tel 타입을 사용해서 숫자를 받거나, 모바일에서 숫자 키패드가 나타나게 해서

휴대폰번호 작성시 도움이 되게 코드를 작성하고 있다.

그런데 오늘은  아예  숫자외의 문자가 입력되지 않게 해달라는 요청을 받았다.(이경우 PC에서 숫자외의 문자가 작성 안되는것이 필요)

시도1.

->  input type="tel"을 아예 number로 바꾸어 주었다.

<input type="tel" maxlength="11" placeholder=" '-'을 제외한 휴대폰번호를 입력해 주세요" > <input type="number" max="11" placeholder=" '-'을 제외한 휴대폰번호를 입력해 주세요" >

바꿨더니 숫자만 작성할수 있게되었다.

->>>>> 문제가 생김 maxlength를 제어할수가 없음ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

후다닥 검색해보니 특정브라우저에서만 작동된다면서 maxlength를 max로 바꿔서 넣으라고 써있었는데,,,,..크롬조차 안되던데..!!!!!

그리고 number는  수량이나 단위를 입력할때 쓰는 input type이라서 휴대폰 번호 입력에는 사용하면 안된다ㅜㅜ

그래서 다시 타입을 number ->  tel로 바꿨다.

시도2.

어느 분의 블로그에서 스크립트를 감사히 받아 넣어보았다.

---> keydown이 ie에서 됐다 안됐다함....???...?????? 머리위로 물음표띄우고 포기

딴길을 찾자!

시도3.

다시 검색시도.

keyup()이벤트를 사용해서 문자입력은 제외하고 숫자만 받게 할수있다는 내용을 발견

--> replace와 정규 표현식의 아름다운 합작

도움받은 곳 -> http://kdsr2z0.github.io/javascript_onlyNum/

[html]

<input type="tel" id="onlyNumber" name="onlyNumber" maxlength="11" placeholder=" '-'을 제외한 휴대폰번호를 입력해 주세요" style="ime-mode:disabled">

[js]

$("#onlyNumber").keyup(function(event){

    var inputVal = $(this).val();

    $(this).val(inputVal.replace(/[^0-9]/gi,''));

});

실행작 - https://jsfiddle.net/jywoo/326f1bm5/12

추가 *** 숫자 키보드에 관한 내용이 정말 잘 정리되어있는 블로그 발견 ***

http://webskills.kr/archives/310