Internet Explorer 11 で contenteditable 属性や maxlength 属性を設定した要素で日本語入力ができないことがある


現象


Internet Explorer 11 で、contenteditable 属性を有効にした div 要素や maxlength 属性を設定した input 要素のあるページを IE9 標準モード以上のドキュメントモードで表示した場合、日本語入力が期待通りに行えない問題が発生することがあります。

 

シナリオ 1: 

Internet Explorer 11 で、Contenteditable 属性を有効にした要素内で IMG 要素や display:inline-block 属性を指定した A 要素を配置し日本語入力をオンにし、文字を変換、確定するとすべての文字が表示されないことがあります

なおこの現象は、Windows 10 の Internet Explorer 11 および Microsoft Edge では発生しません。

 

- 再現手順

1 .以下のようなサイトにアクセスします。

<!DOCTYPE html>

<html><body>

       <div contenteditable="true">

          <a style="display: inline-block">TEST</a>

       </div>

       <div contenteditable="true">

          <img src="test.png" alt="TEST">

       </div>

 </body></html>

 

2. A 要素 もしくはIMG 要素で改行します。

3. IME 日本語入力をオンにし、「にほんご」と入力します。

4. 変換、確定後、入力項目に「語」と表示されます。

 

シナリオ2:

Internet Explorer 11 でmaxlength 属性を指定した input 要素に文字を入力する時、漢字変換前のひらがなも maxlength 属性で指定した文字数しか入力ができません。

 

- 再現手順

1 .以下のようなサイトにアクセスします。

<!DOCTYPE html>

  <html><body>

      <input type="text" maxlength="2">

  </body></html>

 

2. input 要素で IME 日本語入力をオンにし、「にほんご」と入力します。

3.「にほ」しか入力ができません。

原因


この問題は、Internet Explorer 11 が OS が提供する日本語入力機能であるテキスト サービス (Text Services Framework, TSF) の利用方法に問題があるために発生します。この新しいテキスト サービスとのバッファ連携が正しく行われず、文字数を間違って認識してしまい、入力した文字が欠落します。

回避策



シナリオ 1、シナリオ 2 に共通の方法として、IE8 標準以下のドキュメントモードを使用します。

例えば、IE8 標準のドキュメント モードを使用するには、次の HTTP 応答ヘッダーまたは meta タグを使用します。

 

- HTTP ヘッダー

X-UA-Compatible: IE=8

 

- meta タグ

<meta http-equiv="X-UA-Compatible" content="IE=8" />

 

 

シナリオ 2 については、Input 要素の maxlength 属性ではなく、スクリプト、または HTML5 の pattern 属性によって入力文字数制限を行う方法もあります。

 

  • スクリプトによって入力文字数を制限する

例: フォーカス移動時などに文字数をチェックして切り捨てる

日本語入力時ではなく、日本語入力を確定してからほかのフィールドにフォーカスを移動するときに文字数をチェックし、長ければ切り捨てる方法です。以下の例では、フォーカス移動時に発生する onblurイベントにて 3 文字を制限にする関数を実行します。いったん入力自体は 3 文字より長い状態で表示されますが、次へフォーカスを移動すると文字が切り捨てられ、3 文字までが入力された状態になります。

 

(例)

  ------------

  <input type="text" onblur="checkLength(this, 3);" />

  <script>

  function checkLength(target, len) {

   if (target.value.length > len) {

     target.value = target.value.substr(0, len);

   }

  }

  </script>

  ------------

 

  • HTML 5 の pattern 属性を利用して入力文字数を制限する 

HTML5 からの機能になりますが、input 要素の pattern 属性を使用して入力する文字数を制限することが可能です。title 属性を併せて指定することによって、メッセージも表示できます。

チェックが行われるタイミングは、フォームの Submit 時です。

 

(例)

  ------------

  <form action="request" method="POST">

   <input type="text" pattern=".{1,3}" title="3 文字以内で入力して下さい。">

   <input type="submit" value='送信'>

  </form>

  ------------

 

(例) では、テキストボックスに 3 文字を超える文字数が入力されていると、送信ボタンクリック時以下のようなメッセージが表示されます。

「次の形式を使用してください : 3 文字以内で入力してください。」 


 

パターン属性

pattern attribute | pattern property

https://msdn.microsoft.com/en-us/library/hh772941.aspx

状況


マイクロソフトでは、この問題をこの資料の対象製品として記載されているマイクロソフト製品の問題として認識しています。