5

ボタンをクリックすると、特定の単語を置き換えるオプションが表示されます。まず、すべての html を取り除き、単語を置き換えることができる span 要素を作成します。これらの単語のマークアップは異なり、いくつかの問題に直面しています。

  1. スパンの直前または直後をクリックしてテキストを入力すると、テキストはスパンと同じマークアップになります。スパンしかない行に単語を追加するのは非常に困難です。スパンをパディングすることでこれを解決することを考えていまし たが、ちょっと奇妙に見えます。
  2. ユーザーはスパンをクリックして変更できます。変更する前に、ユーザーにスパンをクリックして、置換または無視オプションを選択してもらいたいと思います。つまり、ロックする必要があります。私は capturig keyup でこれを行うことを考えていました。それがスパンから来る場合は e.preventDefault() ですが、それをプログラムするのは少し面倒です。

だから私の質問は：

key up と preventDefault のキャプチャを伴わない contenteditable で span 要素をロックする簡単な方法はありますか (まだ試しておらず、機能するかどうかさえわかりません)。

スパンのすぐ隣でカーソルをクリックまたは移動してテキストを入力すると、スパンの一部になります。それをスパンの一部にしない方法はありますか? スパンのパディングは機能する かもしれませんが、スパンが行の最初の単語である場合は奇妙に見えます。これを説明するために、以下に例の html ファイルを投稿しました。

<!DOCTYPE html>
<html>
 <head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Example</title>
</head>
 <body>
   <div contenteditable="true"></div>
   <script type="text/javascript">
    document.getElementsByTagName("div")[0]
      .innerHTML="<span style='color:green'>hello</span>"
   </script>
 </body>
</html>
4

2 に答える 2

2

編集可能なコンテナー contenteditable="false" 内のスパンをマークします。両方の問題を同時に解決します。

于 2013-09-14T02:45:01.597 に答える
0

contenteditable div 内の要素のロックに関しては。ロックする必要があるスパンを使用していますが、それらはキーダウン イベントをトリガーしないため、div にイベントを設定し、ロックされた要素であるかどうか範囲をチェックします。

私はGoogleクロージャーライブラリを使用しているので、範囲を取得するのは簡単です:

goog.events.listen(document.getElementById("userInput"),//userInput= contenteditable div
   [goog.events.EventType.KEYDOWN,
    goog.events.EventType.PASTE],
   function(e){
       if(32<e.keyCode&&e.keyCode<41){//page up,down,home,end and arrow
           return;
       }
       var el=goog.dom.Range.createFromWindow()
         .getContainerElement();
       if(el.className.indexOf("locked")!==-1){
           e.preventDefault();
       }
});

ロックされたスパンを でパディングすることを検討します。要素の前後に空白が存在しない場合は、解決策が得られたらここに投稿してください。

とにかく余分な空白は後で削除されるため、チェックせずにスパンをパディングすることになりました。ちょっとおかしく見えますが、テキストを追加できないよりはましです。

于 2013-05-14T02:17:58.243 に答える