Utilize ime-mode property to Control Input Method Editor

Problem
Customer asked to control textfield1 can only fill in alphanumeric, textfield2 can fill in alphanumeric and Tranditional Chinese

Solution
We can use ime-mode CSS property to controls the state of the input method editor for text fields.

The default value of ime-mode property is auto, it means "no change is made to the current input method editor state".

If you would like to disable input method editor to allow for numbers and alphabets only, set the property of ime-mode property to "disabled".


If you would like to activate input method editor to allow for numbers, alphabets, and Tranditional Chinese, set the property of ime-mode property to "active".


Demo

Pay attention to some properties do not be supported by specific browser.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/ime-mode