[iOS] 웹뷰에서 숫자 키패드로 뜨지 않을 경우 해결방법

웹뷰(WebView)에서 아래와 같이 input 태그를 작성했음에도 기대했던 숫자 키패드(Number Keypad)가 뜨지 않을 경우가 있었다.

 

<input type="text" inputmode="decimal"/>
<input type="number" inputmode="decimal"/>

 

특이한 점은 iOS 13에서는 잘 동작하였지만 iOS 12에서 발생하는 것으로 확인되었다.

원인은 iOS 12.2 부터 inputmode를 지원한다는 것이다.

inputmode에 decimal을 명시하면 iOS 12.2 부터는 decimalPad가 뜨게 된다.

하지만 그 아래 버전에서는 decimalPad가 뜨지 않았다.

 

대체할 해결 방법은 의외로 간단했다. 방법을 찾는 것이 어렵...

 

<input type="text" inputmode="decimal" pattern="[0-9]*"/>
<input type="text" inputmode="decimal" pattern="\d*"/>

 

pattern attribute를 지정함으로써 해결할 수 있었다.

"[0-9]*" 와 "\d*" 두 패턴 모두 잘 동작하는 것을 확인하였고 둘 중에 원하는대로 사용하면 문제가 없을 듯 하다.

하지만 decimalPad가 아닌 숫자 키패드(소수점이 포함되지 않은)가 나타난다.