ime-mode

  • Revision slug: CSS/ime-mode
  • Revision title: ime-mode
  • Revision id: 356743
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

The ime-mode CSS property controls the state of the input method editor for text fields.

  • {{ xref_cssinitial() }} {{ cssinitial("ime-mode") }}
  • Applies to text fields
  • {{ xref_cssinherited() }} no
  • Media {{ xref_cssvisual() }}
  • {{ xref_csscomputed() }} ?

Syntax

Formal syntax: {{csssyntax("ime-mode")}}
ime-mode: auto
ime-mode: normal
ime-mode: active
ime-mode: inactive
ime-mode: disabled

ime-mode: inherit

Values

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.

Examples

<input type="text" name="name" value="initial value" style="ime-mode: disabled">

This example disables input method support for a field; this might be necessary for fields that enter data into a database that doesn't support extended character sets, for example.

Notes

Unlike in Internet Explorer, the Firefox implementation of ime-mode allows this property to apply to password editing fields. However, this does not make for an ideal user experience, and password fields should disable the IME. Users may correct the inappropriate behavior of sites that don't follow this recommendation by placing the following CSS into their user CSS file:

input[type=password] {
    ime-mode: auto !important;
}

{{ Note("In general, it's not appropriate for a public web site to manipulate the IME mode setting. This property should be used for web applications and the like.") }}

The Macintosh version of Gecko 1.9 (Firefox 3) can't recover the previous state of the IME when a field for which it is disabled loses focus, so Mac users may get grumpy when you use the disabled value.

{{ Note("Don't rely on disabling IME to prevent extended characters from passing through your form. Even with IME disabled, users can still paste extended characters into your form's fields.") }}

Specifications

Specification Status Comment
{{ SpecName('CSS3 UI', '#input-method-editor', 'ime-mode') }} {{ Spec2('CSS3 UI') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{ CompatNo() }} 3.0 (1.9) 5.0 {{ CompatNo() }} {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

IE8 introduced -ms-ime-mode as a synonym for ime-mode. Don't use the -ms- prefix.

See also

  • It was introduced by Microsoft with IE5 as a proprietary extension: {{ spec("http://msdn.microsoft.com/library/ms530767(VS.85).aspx","-ms-ime-mode Attribute | imeMode Property") }}

 

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>ime-mode</code> CSS property controls the state of the input method editor for text fields.</p>
<ul class="cssprop">
  <li><dfn>{{ xref_cssinitial() }}</dfn> {{ cssinitial("ime-mode") }}</li>
  <li><dfn>Applies to</dfn> text fields</li>
  <li><dfn>{{ xref_cssinherited() }}</dfn> no</li>
  <li><dfn>Media</dfn> {{ xref_cssvisual() }}</li>
  <li><dfn>{{ xref_csscomputed() }}</dfn> ?</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("ime-mode")}}</pre>
<pre>
ime-mode: auto
ime-mode: normal
ime-mode: active
ime-mode: inactive
ime-mode: disabled

ime-mode: inherit
</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    <code>auto</code></dt>
  <dd>
    No change is made to the current input method editor state. This is the default.</dd>
  <dt>
    <code>normal</code></dt>
  <dd>
    The IME state should be normal; this value can be used in a user style sheet to override the page setting. <em>This value is not supported by Internet Explorer.</em></dd>
  <dt>
    <code>active</code></dt>
  <dd>
    The input method editor is initially active; text entry is performed using it unless the user specifically dismisses it. <em>Not supported on Linux.</em></dd>
  <dt>
    <code>inactive</code></dt>
  <dd>
    The input method editor is initially inactive, but the user may activate it if they wish. <em>Not supported on Linux.</em></dd>
  <dt>
    <code>disabled</code></dt>
  <dd>
    The input method editor is disabled and may not be activated by the user.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<pre>
&lt;input type="text" name="name" value="initial value" style="ime-mode: disabled"&gt;</pre>
<p>This example disables input method support for a field; this might be necessary for fields that enter data into a database that doesn't support extended character sets, for example.</p>
<h2 id="Notes">Notes</h2>
<p>Unlike in Internet Explorer, the Firefox implementation of <code>ime-mode</code> allows this property to apply to password editing fields. However, this does not make for an ideal user experience, and password fields should disable the IME. Users may correct the inappropriate behavior of sites that don't follow this recommendation by placing the following CSS into their user CSS file:</p>
<pre>
input[type=password] {
    ime-mode: auto !important;
}</pre>
<p>{{ Note("In general, it's not appropriate for a public web site to manipulate the IME mode setting. This property should be used for web applications and the like.") }}</p>
<p>The Macintosh version of Gecko 1.9 (Firefox 3) can't recover the previous state of the IME when a field for which it is disabled loses focus, so Mac users may get grumpy when you use the <code>disabled</code> value.</p>
<p>{{ Note("Don't rely on disabling IME to prevent extended characters from passing through your form. Even with IME disabled, users can still paste extended characters into your form's fields.") }}</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 UI', '#input-method-editor', 'ime-mode') }}</td>
      <td>{{ Spec2('CSS3 UI') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatNo() }}</td>
        <td>3.0 (1.9)</td>
        <td>5.0</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>IE8 introduced<code> -ms-ime-mode </code>as a synonym for <code>ime-mode</code>. Don't use the <code>-ms-</code> prefix.</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>It was introduced by Microsoft with IE5 as a proprietary extension: {{ spec("http://msdn.microsoft.com/library/ms530767(VS.85).aspx","-ms-ime-mode Attribute | imeMode Property") }}</li>
</ul>
<p>&nbsp;</p>
Revert to this revision