WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「テキスト入力時のIMEの状態」

ime-mode「入力モード切替」

ime-modeは、入力モード(全角/半角切替)を行うプロパティですが、実装されているのはIEやFireFoxなど限られたブラウザのみとなります。

CSS3.0では非推奨となっており、実際にはHTML5で追加されたINPUTタグやJavaScriptによる実装(切替ではなくチェックのみ)で実現する必要があります。
<input> 「入力欄、選択入力、ボタン」
日本語入力(ime)制御

CSS Ver.適用要素継承
3.0input不可
広告

ime-modeの指定方法

構文

ime-mode : [ auto | normal | active | inactive | disabled ];

プロパティ意味
ime-mode: auto;何もしません(デフォルト)
ime-mode: normal;ページの標準モードに戻します。(IEなどは動作しません)
ime-mode: active;漢字(全角)モードにします
ime-mode: inactive;英数(半角)モードにします
ime-mode: disabled;英数(半角)モードにし、漢字(全角)モードに変更不可とします
ページTOP

ime-mode のサンプル


<style type="text/css">
.ime-auto     { ime-mode : auto;}
.ime-normal   { ime-mode : normal;}
.ime-active   { ime-mode : active;}
.ime-inactive { ime-mode : inactive;}
.ime-disabled { ime-mode : disabled;}
#sample1 input { width:100px }
</style>

<html>
  <table id="sample1">
    <tr>
      <td>何もしない</td>
      <td><input type="text" class="ime-auto" value="auto"></td>
    </tr>
    <tr>
      <td>標準に戻す</td>
      <td><input type="text" class="ime-nomal" value="nomal"></td>
    </tr>
    <tr>
      <td>漢字(全角)モードにする</td>
      <td><input type="text" class="ime-active" value="active"></td>
    </tr>
    <tr>
      <td>英数(半角)モードにする</td>
      <td><input type="text" class="ime-inactive" value="inactive"></td>
    </tr>
    <tr>
      <td>英数(半角)モード固定にする</td>
      <td><input type="text" class="ime-disabled" value="disabled"></td>
    </tr>
  </table>
</html>
何もしない
標準に戻す
漢字(全角)モードにする
英数(半角)モードにする
英数(半角)モード固定にする

「ime-mode」は主要ブラウザで未対応のため、使用時には注意が必要です。

ページTOP

ベンダープレフィックスの使用

flexboxはCSS3で定義されています。このため、一部ブラウザによっては正常に動作しません。
対応状況→http://caniuse.com/#search=flex

このため、ベンダーフレックス「-webkit-」「-ms-」を利用した方が対応範囲が広がります。(上記サンプル参照)

広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン