ime-mode【IMEモード】

メモ 外部リンク 構文 参考例

メモ

  • テキスト入力コントロールのIME (Input Method Editor) のモード設定
    • Microsoft 拡張 (IE・Edge・Firefox 対応)
      Edge の最新版 (Chromiumベース) では未対応
    • CSS3:実装削除 (外部リンク 参照)
      対応は実装依存
    • 入力値の制限不可 (例:文字列のペースト)
    • ブラウザを限定した業務アプリケーションで有用
  • 代替1
  • 代替2

構文 (※記述方法)

プロパティ
ime-mode:     auto【自動 (変更なし)】
| active【ON状態 (手動切替可)】
| inactive【OFF状態 (手動切替可)】
| disabled【無効化】
| normal【通常 (上書き用)】

<p><input style="ime-mode:auto;">:auto【自動 (変更なし)】</p>
<p><input style="ime-mode:active;">:active【ON状態 (手動切替可)】</p>
<p><input style="ime-mode:inactive;">:inactive【OFF状態 (手動切替可)】</p>
<p><input style="ime-mode:disabled;">:disabled【無効化】</p>

<p>
  <input id="input-ime">
  <label id="label-ime" style="border:1px black inset; padding:0 4px;">未指定</label>
</p>
<p>
  変更:
  <button type="button" onclick="setImeMode('');">未指定</button>
  <button type="button" onclick="setImeMode('auto');">auto</button>
  <button type="button" onclick="setImeMode('active');">active</button>
  <button type="button" onclick="setImeMode('inactive');">inactive</button>
  <button type="button" onclick="setImeMode('disabled');">disabled</button>
  <button type="button" onclick="setImeMode('normal');">normal</button>
</p>

<script>
  function setImeMode(imeMode) {
    var elm = document.getElementById("input-ime");
    elm.style.imeMode = imeMode;
    if (imeMode == "") {
      imeMode = "未指定";
    }
    elm.focus();
    elm = document.getElementById("label-ime");
    elm.innerHTML = imeMode;
  }
</script>

:auto【自動 (変更なし)】

:active【ON状態 (手動切替可)】

:inactive【OFF状態 (手動切替可)】

:disabled【無効化】

変更:

参考例:HTML inputmode【入力モード】属性

<p>ソフトウェアキーボードのモード変更</p>
<p><input inputmode="decimal">:decimal【小数数値入力】</p>
<p><input inputmode="email">:email【Eメールアドレス入力】</p>
<p><input inputmode="none">:none【未指定】</p>
<p><input inputmode="numeric">:numeric【数値入力】</p>
<p><input inputmode="search">:search【検索入力】</p>
<p><input inputmode="tel">:tel【電話番号入力】</p>
<p><input inputmode="text">:text【テキスト入力】</p>
<p><input inputmode="url">:url【URL入力】</p>

ソフトウェアキーボードのモード変更

:decimal【小数数値入力】

:email【Eメールアドレス入力】

:none【未指定】

:numeric【数値入力】

:search【検索入力】

:tel【電話番号入力】

:text【テキスト入力】

:url【URL入力】