0

HTML5のドラッグアンドドロップ機能を利用する機能に取り組んでいます。この機能はFirefoxでのみ機能する必要があるため、クロスブラウザー機能については心配していません。私が遭遇した問題は次のとおりです。データをページのテキストフィールドとパスワードフィールドにのみドラッグできるようにする必要があります。通常のテキスト/プレーンデータ型を使用する場合は正常に機能しますが、ドラッグするデータの一部（パスワード）が機密であるため、検索ボックスにデータをドラッグすることもできます。これは受け入れられません。別の方法は、カスタムデータ型を使用することですが、これを行うと、テキストフィールドとパスワードフィールドがドロップの受け入れを停止します。一言で言えば、私のコードは今次のようになっています：

document.getElementById('#init').addEventListener('dragstart', function(e){
    e.dataTransfer.setData('text/link-uri', 'www.test.com');
    e.dataTransfer.setData('text/sensitive', e.target.dataset.value);
    e.dataTransfer.effectAllowed = 'copy';
});  
window.addEventListener('dragenter', function(e){
    if (e.target.type !== 'text' || e.target.type !== 'password') {
       e.preventDefault();
    }
});
window.addEventListener('dragover', function(e){
    if (e.target.type !== 'text' || e.target.type !== 'password') {
       e.preventDefault();
    }
});
window.addEventListener('drop', function(e){
    var data = e.dataTarnsfer.getData('text/sensitive');
    e.target.value = data;
});

ここに回避策はありますか？どういうわけか、検索ボックスにドラッグする機能を禁止する必要があります。したがって、テキスト/プレーンデータ型の許可されるターゲットのリストから検索ボックスを除外するか、テキスト/パスワードフィールドに新しいデータ型を認識させる必要があります。任意のポインタをいただければ幸いです。ありがとう！ルカ

4

1 に答える 1

0

OK、いくつかの周りを突っついた後、私はこの問題を克服することができました。興味のある人のために、私は基本的にテキスト/プレーンをいくつかの偽のデータに設定し、ドロップハンドラーでカスタムデータ型のみを使用しました。このように、私のフォームでは、常に実際の値を使用しますが、値を検索ボックスにドラッグすると、偽のデータが取得されます。

于 2012-08-22T21:11:17.083 に答える