2021-08-12 121일차

2021. 8. 12. 21:36공부 기록

  • oninput 이벤트, 정규식, replace() 함수로 숫자만 입력할 수 있도록 제한한다.

```<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />```

  • oninput 이벤트, 정규식, replace() 함수로 영어만 입력할 수 있도록 제한한다.

<input type="text" oninput="this.value = this.value.replace(/[^A-Za-z]/ig, '');"/>

  • html에서 input type="number" 로 입력값을 받을경우에 다른 글자는 입력할 수 없지만, e는 입력이됩니다.
  • 그걸 막기위한 몇가지 방법을 소개하려고 합니다.
  • 알파벳 e의 keyCode인 69가 들어올 경우 false를 리턴해버리면 e는 입력되지 않습니다.
  • 하지만 복사해서 붙혀넣기 했을경우엔 e가 들어오기때문에 완벽한 방법이라곤 할 수 없습니다.

onkeydown="javascript: return event.keyCode == 69 ? false : true"

  • 다음방법은 자바스크립트를 사용해서 막는방법인데, 이 방법도 위의 방법이랑 비슷한 원리입니다.
  • 이 방법의 경우 숫자인 1,2,3,4,5,6,7,8,9,0을 제외한 모든 키의 입력을 false로 리턴해버리는겁니다.
  • 이렇게 했을경우의 단점은, 숫자말곤 전부 다 막혀버리기때문에 단축키로 붙혀넣기가 되지않습니다.
  • 그리고, 마우스 클릭으로 붙혀넣기를 할 경우엔 이것역시 e를 막을 수 없습니다.

$(".numberOnly").on("keydown", function(e) { if(!((e.keyCode > 95 && e.keyCode < 106) || (e.keyCode > 47 && e.keyCode < 58) || e.keyCode == 8 || e.keyCode == 9)) { return false; } });

자주하는 실수

내가 모르는 것

느낀점

  • input type number에는 허점이 많은것같다.

'공부 기록' 카테고리의 다른 글

2021-07-28 106일차  (0) 2021.07.28
2021-07-26 104일차  (0) 2021.07.26
2021-07-23 101일차  (0) 2021.07.24
2021-07-22 100일차  (0) 2021.07.22
2021-07-21 99일차  (0) 2021.07.21