ブラウザの貼り付けコンテキストメニューを無効または削除する方法

私はアカウントを作成するために必要なクレジットカードサイトを持っています。どうやら彼らは、アカウント所有者がすべてのウェブサイトで同じパスワードを使用して、次の大きなアカウント違反が発生したときにできるだけ多くのお金を払わなければならないと考えているようです。この目的のため、Webサイトのパスワードフィールドでクリップボードの使用を無効にして、アカウント所有者がパスワードマネージャを使用するのを阻止することにしました。ブラウザの貼り付けコンテキストメニューを無効または削除する方法

ブラウザのコンテキストメニューの[貼り付け]メニュー項目がFirefoxとIE11ユーザーのためにグレー表示されているのは本当に奇妙です。 Chromeユーザーの場合、プレーンテキストのコンテキストメニュー項目としてペーストして貼り付けることは完全に欠落しています。

自分のサイトでマークアップとJavaScriptを見て、キーボードとマウスのイベントにイベントリスナーを追加して、パスワードフィールドへのクリップボードアクセスをブロックしていることを確認しましたが、本当に困惑しているのは、ユーザーがブラウザの入力を右クリックしたときに表示されるコンテキストメニューの内容を変更することができます。パスワードフィールドは、パスワードタイプの入力エレメントです。

<input readonly tabindex="51" maxlength="20" style="height: 22px; width: 200px;" class="gwt-PasswordTextBox gwt-PasswordTextBox-readonly gwt-Focus" type="password">

私は実際にCtrl-Vをブロックする方法や、JavaScriptによるフィールドへのマウスの貼り付けアクセスを傍受する方法に興味はありません。私はそれを行う方法を知っています。私の質問は、ブラウザのコンテキストメニューの内容を変更する方法です。なぜこれが他の質問と同じではないのか私の答えの概念実証を参照してください。

出典

2016-03-25 Eric

あなたが（ '：パスワードを'）$を試してみました（ 'ペースト' を、機能（E）{Eに。 preventDefault（）;}）; ？ – gaetanoM

お待ちください....質問は何ですか？タイトル、確かに、その後、FF/IEでグレー表示され、Chromeで完全に消えてしまったと言いました...あなたが望むものとまったく同じように聞こえる。また、最初の段落で素敵な掘り出し物。私はあなたがこれをクライアントに持ってきて、基本的にあなたに何も知らないと言ったと仮定します。 – abluejelly

この提案はうまく見えます。http://ux.stackexchange.com/a/21070/53965 2つのフィールドを持たず、彼らはそれが正しいメールであることを視覚的に確認することができます。 –

実際にはコンテキストメニューを調整する必要はありませんが（設計仕様でない限り）、ペースト機能を無効にするだけで済みます。

この例では、指定された要素を「強制終了」する方法を示します。覚えておいて、それはまだ、コンテキストメニューの[貼り付け]が表示されますが、動作は最初のパスワードフィールドでは動作しません。

今

window.addEventListener("DOMContentLoaded", function(){ 
 

 
    var p1 = document.getElementById("p1"); 
 
    p1.addEventListener("paste", function(evt){ 
 
     evt.preventDefault(); 
 
     evt.stopPropagation(); 
 
    }); 
 

 
});

<input type="password" id="p1" placeholder="Paste won't work in me."> 
 
<input type="password" id="p2" placeholder="Paste will work in me.">

、あなたが本当にコンテキストメニューを調整する必要がない場合クロスブラウザの最良の方法は、要素のcontextmenuイベントを処理し、そのイベントの既定の動作を防止することです（スニペットの貼り付け動作を妨げたのと同じですが）あなた自身の詳細はこちらを参照してください。http://www.sitepoint.com/building-custom-right-click-context-menu-javascript/

また、contextmenuイベントの詳細については、https://developer.mozilla.org/en-US/docs/Web/Events/contextmenuを参照してください。

出典

2016-03-25 15:43:39

これは、私が実際に知りたいことのひとつです。私が本当に知りたいのは、（FFとIE）グレーアウトしたり、Chromeのパスワードフィールドを右クリックして表示される貼り付けコンテキストメニュー項目を削除する方法ですブラウザ。私のデザイン仕様ではありません。私はそれがひどい考えだと思う、私はちょうどそれができる方法を知りたい。 – Eric

@ Eric既存のコンテキストメニューを変更するには、特定のクライアント向けの特定のソリューションを作成する必要があります。より良いアプローチは、独自のコンテキストメニューを作成することです。詳細については、私の更新答えを見てください。 –

私は仕事中にもう一人の男ともう少しこれを見ました。入力のreadonly属性は、コンテキストメニュー項目が表示されない理由です。私はそれにreadonly属性を追加することによって、同じ縮小コンテキストメニューを表示するためのユーザー名フィールドを取得することができました。

明らかに、JavaScriptイベントリスナーでキーストロークを傍受し、この読み取り専用フィールドにキーストロークを渡すので、パスワードを入力する方法がわかります。ここで

は非常に単純化された概念実証です：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Using a Read-only Field as an Input to Overly Control User Experience</title> 
 
\t <script> 
 
\t \t function passAlongKeys(e) { 
 
\t \t \t //debugger; 
 
\t \t \t //TODO handle backspace, delete key, current insertion point etc. 
 
\t \t \t e.currentTarget.value = e.currentTarget.value + e.char; 
 
\t \t } 
 
\t </script> 
 
</head> 
 
<body> 
 
\t <p>Plain text:<input id="text" type=="text" ></p> 
 
\t <p>Plain password: <input id="password" type=="password" ></p> 
 
\t <p>Readonly text: <input id="textro" readonly ></p> 
 
\t <p>Readonly password:<input type=password id="passwordro" readonly ></p> 
 
\t <p>Readonly text with JS:<input id="textrojs" type=text onkeydown="passAlongKeys(event)" readonly ></p> 
 
\t <p>Readonly password with JS:<input id="passwordrojs" type=password onkeydown="passAlongKeys(event)" readonly ></p> 
 
</body> 
 
</html>

出典

2016-03-25 16:21:53 Eric

あなたの証明は、最後の2つのボックスで未定義に印刷されるはずですか？また、タイピングが可能であるという視覚的な手がかりがないので、この解決策は生産準備中ではないと私は考えています。 –

概念の証明は、アルファベット文字を読み込み専用のテキスト入力に沿って渡す方法を示しています。それはちょうど私が数分でホイップアップしたものです。コンセプトを証明するだけの「生産準備完了」ではありません。 – Eric

ブラウザの貼り付けコンテキストメニューを無効または削除する方法

答えて

関連する問題