8 
<!DOCTYPE html>
<html>
<head>
    <title>Clipboard Paste Text</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
</head>
<body>
    <input type="text" placeholder="paste in here" />
    <script type="text/javascript">
    /* <![CDATA[ */
    $(document, 'input[type="text"]').on('paste', function(event) {
        var oEvent = event.originalEvent;
        oEvent.preventDefault();

        var clipText = '';
        if(window.clipboardData){
            clipText = window.clipboardData.getData('Text');
        }else if(typeof oEvent == 'object' && oEvent.clipboardData){
            clipText = oEvent.clipboardData.getData('text/plain');
        }

        // console.log('Pasted ' + clipText.length + ' characters.');
        alert('Pasted ' + clipText.length + ' characters.');
    });
    /* ]]> */
    </script>
</body>
</html>

^このデモコードがあります。とをバインドしpaste eventます。INPUT[TEXT]DOCUMENT

  • Google Chrome (およびOpera 15以降) では、キャレットCtrl+Vのない(入力とテキストエリアの外側)がキャプチャされます。
  • IE およびFirefox では、貼りCtrl+V付け可能なオブジェクト(入力およびテキスト領域)の外側はキャプチャされません。
    (ただし、ドキュメントの貼り付けイベント キャプチャpaste eventをすべてinputsおよびにバインドしますtextareas。)

これは適切な動作ですか？私のJSは正しいですか？

3 つのブラウザーすべてで入力テキストボックスなしで Ctrl+V をキャプチャしたいと思います。現在テキスト入力を使用していますが、それを完全に削除して、入力ボックス レベルではなくドキュメント レベルでイベントをキャプチャしたいと考えています。それはできますか？

PS：テキストエリアに貼り付けるとブラウザを占有する大量のテキストを貼り付ける必要があります。hidden fieldで をキャプチャして に保存してpaste eventいinputboxます。paste events私の現在のソリューションは適切に機能しますが、何か不足しているのか、それとも FF であり、IE が入力/テキストエリア レベルでのみトリガーされるのか、まだ疑問に思っています。

PPS : 既にspellcheck=falseandautocomplete=offトリックを使用して、より多くのテキストを貼り付けられるようにしました... しかし、まだ少しハングします。編集可能にする必要がないので、これはより良い解決策です。

PPS : 私の JS スキルはかなり錆びており (JS サバイバル モードに似ています)、この更新プログラムを頻繁に使用するので、ブラウザーの下位互換性について心配する必要はありません。

jsfiddle を作成しました: http://jsfiddle.net/ninty9notout/A42UN/

4

1 に答える 1

5

http://www.w3.org/TR/clipboard-apis/ 5.1.3 貼り付けイベントより

貼り付けイベントには、編集不可能なコンテキストでの既定のアクションはありませんが、イベントは関係なく発生します。

Chrome はレイジー ペースト イベントを使用します。つまり、フォーカスされた要素が編集可能なコンテンツ領域であるかどうかを確認しません。これが、ペースト イベントがドキュメントに対して機能する理由です。

firefox と IE に関しては、paste イベントの発生を許可する前に実際に要素をチェックします。したがって、基本的に、貼り付けイベントがすべてのブラウザーで機能するためには、コンテンツの編集可能な要素が必要です。

ページのメイン div としてコンテンツ編集可能な DIV を使用して遊んだところ、探している結果が得られるようです。答えがやや「ハック」のように思われる場合は、ご容赦ください。

contenteditable div をコンテナー div として Web ページの残りの部分に配置し、貼り付け用のキーでない限り、ユーザーがキーを押したときに false を返すことで、ユーザーが div に入力できないようにすることができます。

私がどのようにそれを行ったかを見たい場合は、ここにフィドルがあります。

http://jsfiddle.net/NVqQ7/3/

html

<div id="pageDiv" contenteditable><div>other content</div></div>

CSS

html, body, #pageDiv {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

JavaScript:

$(document).on('paste', function(event){
    var oEvent = event.originalEvent;
    if (event.preventDefault())
        event.preventDefault();

    var clipText = '';
    if(window.clipboardData){
        clipText = window.clipboardData.getData('Text');
    }else if(typeof oEvent == 'object' && oEvent.clipboardData){
        clipText = oEvent.clipboardData.getData('text/plain');
    }

    // console.log('Pasted ' + clipText.length + ' characters.');
    alert('Pasted ' + clipText.length + ' characters.');
});

$('#pageDiv').keydown(function(e){
    if (!event.ctrlKey)
        return false;
});

いくつかのメモ:

  1. 貼り付けイベントを有効にするには、ユーザーがページの本文をクリックする必要があります。つまり、ブラウザをクリックするだけでは不十分な場合があります。

  2. firfox では、子 div で contenteditable="false" を設定する必要があります。そうしないと、ユーザーはそれらの要素にテキストを追加できます。

  3. div の高さと幅を 100% にする必要がありました。HTML と本文の高さと幅が 100% でな​​い場合、IE では機能しません。

  4. ドキュメントで貼り付けイベントを機能させるには、jquery ライブラリを IE の新しいバージョンに変更する必要がありました。

お役に立てれば

于 2014-07-11T19:58:45.013 に答える