redwarrior’s diary

C#, ASP.NET, WEB, G*などの雑多な情報

(小ネタ)ASP.NET MVC でテキストボックスに小数を入力する時に日本語入力をオフにする方法

今回も以下に関連した話題。

redwarrior.hateblo.jp

二つ前の記事でも書きましたが、上記ではinputタグのtype属性が「text」になってしまうため、フォーカスが当たった時に日本語入力モードになってしまいます。

これだと数字を入力した後にいちいち確定しなければならないため、小数を入力するフォームが続いたりするとかなり面倒くさいです。これを解決する方法を調べました。

全てのケースで対応できる解決策ではないのですが、スタイルシートで制御できます。
以下のように、style属性にime-mode: disabledを設定します。

@* EditorForの場合 *@
@Html.EditorFor(model => model.Published, new { htmlAttributes = new { style = "ime-mode: disabled" } })


@* TextBox,TextBoxForの場合 *@
@Html.TextBox("Published", null, new { style = "ime-mode: disabled" })

テキストボックスにフォーカスが移ると、IMEが無効になるためtype=textのテキストボックスでも直接入力モードになります。

注意点1

IMEが無効にされた状態で、他の日本語入力が必要なテキストボックスがある場合、そのテキストボックスにフォーカスが移っても、そのままでは日本語入力が出来るようにはなりません。

日本語入力を可能にするためには、そのテキストボックスのstyle属性にime-mode: activeを設定する必要があります。(設定の仕方は上と同じです)

注意点2

全てのケースで対応できる解決策ではない理由は、これはリンク先で書かれているように、ChromeOperaSafariではサポートおらず、廃止予定のプロパティだからです。

developer.mozilla.org

今回の目的は小数の入力作業の効率化であり、Chrome等を使用することは想定していないため、この方法を取りました。
以上です。