5

ユーザーが要素に改行を挿入するとcontenteditable、ブラウザーは要素に HTML を挿入します。

[Enter]さまざまなブラウザでヒットすると、次のようになります。

IE:      <p></p>
Chrome:  <div><br></div>
Safari:  <div><br></div>
Firefox: <br />
Opera:   <br />

(この JSFiddle demoで自分でテストしてください。)

ユーザーが HTML を挿入していないときにブラウザに HTML を挿入させないようにする方法はありますか? もちろん、私はただ使うことができました

<textarea></textarea>

...そして、それは私が望む方法と非常によく似た動作をしますが、Javascript を使用して編集可能な要素に HTML を追加および変更するため、厳密に「テキストのみ」の入力は必要ありません。

私は常に、ユーザーが入力するすべての HTML を取り除き、私が作成した特別なクラスを持つ HTML のみを残すことを検討しました。ただし、それは優れた解決策とは思えません。「HTMLを作成して要素に入れるのをやめてください！」と言うような何か、wrap='soft'または他の方法はありますか?

4

2 に答える 2

2

コンテンツを編集可能にすると、暗黙的にユーザーが HTML のコンテンツを変更できるようになります。

</p>Return キーを押すと、段落を閉じて ( ) 新しい段落を開始する( ) か、改行を<p>入力する( ) など、ある種の改行が挿入されます<br>。どちらも HTML では HTML タグが必要です。これは、標準の改行文字 (.\nまたは など\n\r) が単一のスペースとしてレンダリングされるという単純な事実のためです。これはユーザーが期待するものではありません。したがって、生の改行を「ソフト ラップ」として挿入します。意味がなく、最終的には、ブレークを挿入すべきだと思うときにブレークを挿入しないことでサイトに腹を立てて、エンターキーを無力にバタンと叩くユーザーにつながります.

さらに興味深い事実として、ユーザーがテキストを強調表示すると、キーボード ショートカットを使用してテキストを太字にしたり、斜体にしたりできる (またはすべき) ことができます。これにより、HTML が再び挿入されます。

この動作をオーバーライドする Javascript を作成するまでもなく、HTML タグを挿入する Enter キーを無効にして、要求された改行をレンダリングできるかどうかはわかりません。

これを示すために、ここに非常に単純なページがあります:

<html>
<body>
<div contentEditable="true"> Some things.</div>
</body>
</html>

(少なくとも Internet Explorer では) テキストをダブルクリックすると編集可能になります。行末に移動し、次のように入力します。

  • Enter- (新しいパラグラフが作成されます (以前のテキストをpタグで囲みます)。
  • 「Words」と入力し、それを選択してヒットするとCrtl + b、テキストが<strong>タグで囲まれます。
  • ヒットShift + Enter- 改行 ( <br>) が挿入されました。
  • 「More words」と入力して選択し、タグCrtl + iでイタリック体になりました。<em>

ソースは次のようになります。

<html>
<body>
<div contentEditable="true">
  <p>Some things.</p>
  <p>
    <strong>Words</strong>
    <br>
    <em>More words</em>
  </p>
</div>
</body>
</html>

領域に入るコンテンツを完全に制御したい場合は、WYSIWYG エディターを使用するか、ブラウザーが何をしているのかをおそらく知っていることを受け入れて、心配する必要がないようにすることをお勧めします。 .

于 2014-01-17T01:13:46.217 に答える