3

私が取り組んでいるプロジェクトでは、ユーザーが何らかの形式の HTML/javascript 入力内で入力するときに、テキストの自動書式設定を行う必要があります。現在、入力は contenteditable HTML 要素として実装されています。私がこれを処理していた方法は、keyDown を使用して追加する内容を決定し、execcommand を使用して、キー イベントにテキストを追加する前に適切なフォーマットを設定することでした。これは、Chrome、Firefox、および Safari で完全に機能します。しかし、私はIEでかなり奇妙な問題に遭遇しています。カーソルが編集可能なコンテンツの最後または最初にあるときに、選択範囲で execcommand を使用するか、その値を切り替えると、完全に機能します。問題は、何も選択されておらず、カーソルがテキストの末尾または先頭にない場合、execcommand は、現在のイベントによって追加されたテキストだけでなく、コンテンツ編集可能なすべてのコンテンツに影響を与えることです。

問題をかなり明確に示す簡単なコード例を次に示します。

<!DOCTYPE html>
<html>
  <head>
    <script>
      function styleActive(style) {
        var isActive = false;
        if(style) {
          isActive = document.queryCommandState(style);
    }
        return isActive;
      }
      function setStyle(style, desiredState) {
        if(style) {
          if(styleActive(style) != desiredState) {
            document.execCommand(style, false, null);
          }
        }
      }
      function autoFormat(e) {
        var keynum;
        var keychar;
        var numcheck;
        if(e.which) {
          keynum = e.which;
        }
        keychar = String.fromCharCode(keynum);
        numcheck = /\d/;
        if(numcheck.test(keychar)) {
          setStyle("subscript", true);
        } else {
          setStyle("subscript", false);
        }
      }
    </script>
    <style type="text/css">
      p._editable, p._editable p {margin:0px;}
      p._editable {margin-left:6px; margin-right:6px; margin-top:3px; margin-bottom:3px;}
    </style>
  </head>
  <body>
    <button type="button" onclick='document.getElementById("editable").focus(); document.execCommand("subscript", false, null);'>Sub</button>

    <button type="button" onclick='document.getElementById("editable").focus(); document.execCommand("superscript", false, null);'>Sup</button>
    <div>
      <div style="display:inline-block;min-width:30px;border-style:solid; border-width:5px;">
        <p id="editable" class="_editable" contenteditable="true" onkeydown="autoFormat(event);"></p>
      </div>
    </div>
    <script>document.getElementById("editable").focus();</script>
  </body>
</html>

基本的には、2 つの div 内の ap 要素であり、展開されると一緒に展開され、p 要素からの keyDown イベントに基づいてフォーマット状態が変更されます。キーが数字の場合は添字がアクティブであることを確認するだけで、そうでない場合はアクティブでないことを確認します。問題を再現する最も簡単な方法は、いくつかの数字を入力してから、矢印キーを使用してカーソルを元に戻すことです。私が見ているのは、矢印キーが数字キーではないため、添え字のexeccommandが呼び出されているため、最初の移動後、添え字付きのすべての数字が正常になることです。これを発生させる別の方法は、何も選択されていないテキストの途中でサブまたはサップ ボタンをクリックすることです。

理想的には、何が起こっているのかを理解し、何も選択されていない状態でフォーマットを切り替えてもすべてに影響を与えないようにする方法を理解して、この方法で物事を処理し続けることができるようにすることです。それが不可能な場合は、これを処理する方法の提案をいただければ幸いです。望ましい最終結果は、誰かがクリックしたときにポップアップする javascript/HTML のテキスト入力です。入力すると、テキストの内容と追加しようとしている内容を判断し、それに応じて出力をフォーマットし、カーソル位置を次のように維持します。テキスト入力は通常そうします。私は新しいブラウザーについてのみ心配しているので、HTML5 をサポートする主要なブラウザーの IE9 以降のバージョンです。

現在、私が思いつく最善のアイデアは、問題が発生している場合に keyDown でキー入力を飲み込み、DOM 操作を介して文字を挿入しようとすることです。

4

0 に答える 0