input type=text 에서 한글/영문 입력값 제한하기

아쉽지만, 크롬에서는 ime-mode 가 동작하지 않는다고 합니다. ㅠㅠ

====

아래의 css 에 ime-mode 를 사용하는 방법은,

IE 에서는 동작하지만, 크롬(chrome) 이나 Opera 등의 브라우저에서는 동작하지 않는다.

브라우저 호환을 위해서 jQuery 를 이용해서 해당 기능을 사용할 수 있다. 

<script type="text/javascript">

$(document).ready(function(){

$('#id').css("ime-mode", "active");

});

</script>

이렇게 하면, 크롬에서도 디폴트로 한글입력이 가능하다.

====

input type=text 에서 한글/영문 입력값을 제한하거나 기본 입력문자를 지정할 수 있다. 

스타일에서 ime-mode 를 이용하는데, 아래와 같은 옵션들이 있다. 

<input type="text" style="ime-mode: auto;">

<input type="text" style="ime-mode: normal;">

<input type="text" style="ime-mode: active;">

<input type="text" style="ime-mode: inactive;">

<input type="text" style="ime-mode: disabled;">

/* Global values */

ime-mode: inherit;

ime-mode: initial;

ime-mode: unset;

- auto

한글/영문 모두 입력 가능하다.

No change is made to the current input method editor state. This is the default.

- normal

이 값은 스타일 시트에서 오브라이트를 위해 사용할 수 있다. 인터넷익스프롤러에서 지원되지 않는다.

The IME state should be normal; this value can be used in a user style sheet to override the page setting. This value is not supported by Internet Explorer.

- active

디폴트 한글이며, 한글/영문 모두 입력 가능하다.

The input method editor is initially active; text entry is performed using it unless the user specifically dismisses it. Not supported on Linux.

- inactive

디폴트 영문이며, 한글/영문 모두 입력 가능하다.

The input method editor is initially inactive, but the user may activate it if they wish. Not supported on Linux.

- disabled

영문만 입력 가능하다.

The input method editor is disabled and may not be activated by the user.

** 출처 : https://developer.mozilla.org/ko/docs/Web/CSS/ime-mode