3

私は JavaScript にかなり慣れていないので、ここの誰かが次のことで私を助けてくれることを願っています:

主にIE 8での解決策を探しています-他のブラウザ/バージョンをさらにうまくカバーできるかどうか。動的に作成され、テキストと HTML タグの両方を含む contenteditable div が 1 つだけのページがあります。ページで、カーソル位置に特定のテキストを挿入するボタンをこの div に追加したいと考えています。

これまでのところ、div 内のテキストを選択している限り正常に動作する次のコードがありますが、何も選択せずにカーソルをそこに置くと、テキストが div の外に挿入されます。

選択位置と同じように、常にカーソル位置にテキストを追加するにはどうすればよいですか? (カーソル位置でのみ必要になるため、選択を置き換える必要さえありません。また、これは特定の div にのみ必要です。)

私のコード:

<html>
<head>
<script type="text/javascript">
    function test()
    {
        var input = "TEST";
        document.selection.createRange().pasteHTML(input);
    }
</script>

</head>
<body>
    <div id="myDiv" contenteditable>This is a test text.</div><br />
    <button type="button" onclick="test()">Test</button>
</body>
</html>

これについて助けてくれてありがとう、ティム

4

1 に答える 1

7

問題は、IE でイベントが発生するまでに<button>要素がフォーカスを奪い、選択を破棄することです。click選択不可にする<button>と、フォーカスを受け取ることができなくなります。これは、IEのunselectable属性を使用して行われます。

<button type="button" unselectable="on" onclick="test()">Test</button>

デモ: http://jsbin.com/aqAYUwu/5

私の見解ではあまり良くない別の方法は、mousedown代わりにイベントを使用し、デフォルトのアクションを防止することです。

<button type="button" unselectable="on"
    onmousedown="test(); return false">Test</button>

要素内の現在のカーソル位置に HTML を挿入するクロスブラウザー関数は、次の場所にありcontenteditableます。

https://stackoverflow.com/a/6691294/96100

最後に 1 つ:contenteditableはブール属性ではないため、厳密に言えば値 (つまり<div contenteditable="true">)を指定する必要が<div contenteditable>ありますが、私が試したすべてのブラウザーで機能します。

于 2013-10-28T10:42:37.957 に答える