5

ユーザーがコンテンツを選択/強調表示できないが、入力できるコンテンツ編集可能な div を作成する方法はありますか? ユーザーがキーごとに削除したり入力したりしなければならず、ハイライトによる一括編集ができないインターフェイスを作成したいと考えています。

CSS の「ユーザー選択」プロパティのさまざまな形式を調べました。これは静的コンテンツでは機能しますが、コンテンツ編集可能な要素/入力では機能しないようです。

何か案は？

ありがとう

4

2 に答える 2

1

textareacontenteditable の代わりに aを受け入れることができる場合は、次のdivようにすることができます。

window.onload = function () {
    var div = document.getElementById('div');
    if (div.attachEvent) {
        div.attachEvent('onselectstart', function (e) {
            e.returnValue = false;
            return false;
        });
        div.attachEvent('onpaste', function (e) {
            e.returnValue = false;
            return false;
        });
    } else {
        div.addEventListener('paste', function (e) {
            e.preventDefault();
        });
        div.addEventListener('select', function (e) {
            var start = this.selectionStart,
                end = this.selectionEnd;
            if (this.selectionDirection === 'forward') {
                this.setSelectionRange(end, end);
            } else {
                this.setSelectionRange(start, start);
            }
        });
    }
};

HTML:

<form>
    <textarea id="div"></textarea>
</form>

jsFiddle でのライブ デモ。

コードに関するいくつかの観察：

  • 多くのブラウザでは、 は 内のまたは要素onselectに対してのみ起動されます。これが、HTML があなたのものと異なる理由です。inputtextareaform
  • IE9 ～ 10 はselectionDirection.
  • IE でない場合でも、マウスでテキストを選択し、マウス ボタンを離さずにキーを押すことで、一連のテキストを置き換えることができます。マウスボタンが押されているかどうかを検出し、その場合はキーボード操作を防止することで、これを防ぐことができると思います。これはあなたの宿題です。）。
  • IE のコードは contenteditabledivでも動作します。

編集

私もあなたの「宿題」をやったようです。

于 2013-09-24T19:01:22.780 に答える