JavaScript を使用して HTML フォームのテキスト フィールドにテキストを貼り付ける機能を無効にする方法はありますか?
たとえば、ユーザーが電子メールを 2 回入力する必要がある単純な登録フォームがあります。2 番目の電子メール エントリは、最初の電子メール エントリに入力ミスがないことを確認するためのものです。ただし、ユーザーがメールをコピーして貼り付けると、目的に反し、間違ったメールを入力してコピーして貼り付けたために問題が発生するユーザーがいます。
質問がわかりにくかったかもしれませんが、人々がブラウザでテキストをコピー (またはドラッグして選択) するのを防ごうとしているわけではありません。ユーザーエラーを最小限に抑えるために、入力をテキストフィールドに貼り付けないようにしたいだけです。
おそらく、この「ハック」を使用する代わりに、私がここで解決しようとしている核心の問題に対する別の解決策を提案できますか? 私が行ったユーザー テストは 6 回未満ですが、これはすでに 2 回発生しています。私の視聴者は、コンピューターの習熟度が高くありません。
やらないでください。ユーザーのブラウザをいじらないでください。コピーしてメールの確認フィールドに貼り付けることにより、ユーザーは入力内容に対する責任を負います。彼らが間違ったアドレスをコピーして貼り付けるほど愚かである場合（それは私に起こりました）、それは彼ら自身の責任です。
電子メールの確認が機能することを確認したい場合は、サイトが待機している間にユーザーに電子メールをチェックしてもらいます (「ウェブメール プログラムを新しいウィンドウで開いてください」)。電子メール アドレスを太い文字で表示します (「確認用電子メールの送信先....に誤りがありますか? 変更するには、ここをクリックしてください)。
さらに良いことに、可能であれば、ユーザーに確認なしで何らかの制限付きアクセスを許可します。そうすれば、訪問者はすぐにログインでき、他の理由 (スパム フィルターなど) で確認メールがブロックされた場合でも、訪問者と連絡を取り合う可能性が高くなります。
コピーペースト機能を無効にする入力に「disablecopypaste」のクラスを追加し、このjQueryスクリプトを追加します
$(document).ready(function () {
$('input.disablecopypaste').bind('copy paste', function (e) {
e.preventDefault();
});
});
最近、しぶしぶフォーム要素への貼り付けを無効にする必要がありました。そのために、Internet Explorer (およびその他の) の onpaste イベント ハンドラーのクロスブラウザー* 実装を作成しました。私のソリューションは、サードパーティの JavaScript ライブラリから独立している必要がありました。
これが私が思いついたものです。貼り付けを完全に無効にするわけではありません (たとえば、ユーザーは一度に 1 文字を貼り付けることができます) が、私のニーズを満たし、キーコードなどを処理する必要がなくなります。
// Register onpaste on inputs and textareas in browsers that don't
// natively support it.
(function () {
var onload = window.onload;
window.onload = function () {
if (typeof onload == "function") {
onload.apply(this, arguments);
}
var fields = [];
var inputs = document.getElementsByTagName("input");
var textareas = document.getElementsByTagName("textarea");
for (var i = 0; i < inputs.length; i++) {
fields.push(inputs[i]);
}
for (var i = 0; i < textareas.length; i++) {
fields.push(textareas[i]);
}
for (var i = 0; i < fields.length; i++) {
var field = fields[i];
if (typeof field.onpaste != "function" && !!field.getAttribute("onpaste")) {
field.onpaste = eval("(function () { " + field.getAttribute("onpaste") + " })");
}
if (typeof field.onpaste == "function") {
var oninput = field.oninput;
field.oninput = function () {
if (typeof oninput == "function") {
oninput.apply(this, arguments);
}
if (typeof this.previousValue == "undefined") {
this.previousValue = this.value;
}
var pasted = (Math.abs(this.previousValue.length - this.value.length) > 1 && this.value != "");
if (pasted && !this.onpaste.apply(this, arguments)) {
this.value = this.previousValue;
}
this.previousValue = this.value;
};
if (field.addEventListener) {
field.addEventListener("input", field.oninput, false);
} else if (field.attachEvent) {
field.attachEvent("oninput", field.oninput);
}
}
}
}
})();
これを利用して貼り付けを無効にするには:
<input type="text" onpaste="return false;" />
* oninput が W3C DOM 仕様の一部ではないことは知っていますが、このコードをテストしたすべてのブラウザー (Chrome 2、Safari 4、Firefox 3、Opera 10、IE6、IE7) は、oninput または onpaste をサポートしています。これらすべてのブラウザのうち、Opera だけが onpaste をサポートしていませんが、oninput をサポートしています。
注: これは、オンスクリーン キーボードを使用するコンソールまたはその他のシステムでは機能しません (各キーが選択されたときに、オンスクリーン キーボードがブラウザーにキーを送信しないと仮定します)。オンスクリーン キーボードと Opera (例: Nintendo Wii、一部の携帯電話) を使用しているユーザーがページ/アプリを使用できる可能性がある場合は、テストしてオンスクリーン キーボードが正しく機能することを確認しない限り、このスクリプトを使用しないでください。キーを選択するたびにブラウザにキーを送信します。
できます.....しかし、しないでください。
ユーザーのブラウザのデフォルトの動作を変更するべきではありません。Web アプリケーションのユーザビリティは本当に悪いです。また、ユーザーがこのハッキングを無効にしたい場合は、ブラウザで JavaScript を無効にするだけです。
これらの属性をテキストボックスに追加するだけです
ondragstart=”return false” onselectstart=”return false”
奇抜なアイデア: サインアップ プロセスの一環として、ユーザーにメールを送信するように要求します。これは、mailto リンクをクリックしても機能しない場合 (たとえば、Web メールを使用している場合) には明らかに不便ですが、タイプミスに対する保証とメール アドレスの確認を同時に行う方法であると考えています。
これは次のようになります: 彼らは、名前、パスワードなどを入力して、ほとんどのフォームに記入します。送信をプッシュするとき、実際にはリンクをクリックしてメールをサーバーに送信しています。他の情報は既に保存されているため、メッセージには、これがどのアカウント用であるかを示すトークンのみが含まれています。
ユーザーが2回入力したばかりのサイトに確認URLへのリンクがあるメールアドレスに確認メールを送信すると、メッセージが届いたことがわかります。
メールの受信を確認するためにクリックしない人は、自分のメールアドレスを間違って入力した可能性があります。
完璧な解決策ではありませんが、いくつかのアイデアです。
あなたはjqueryを使うことができます
HTMLファイル
<input id="email" name="email">
jqueryコード
$('#email').bind('copy paste', function (e) {
e.preventDefault();
});
@boycs の回答を拡張して、「on」も使用することをお勧めします。
$('body').on('copy paste', 'input', function (e) { e.preventDefault(); });
2 つの電子メール フィールドを使用する必要があり、ユーザーが入力ミスした同じ電子メールをフィールド 1 からフィールド 2 に誤って貼り付けることを懸念している場合は、ユーザーが 2 番目の電子メール フィールドに何かを貼り付けた場合にアラート (またはもっと微妙なもの) を表示するといいでしょう。
document.querySelector('input.email-confirm').onpaste = function(e) {
alert('Are you sure the email you\'ve entered is correct?');
}
この方法では、貼り付けを無効にせず、最初のフィールドに入力してから 2 番目のフィールドに貼り付けたと思われる内容が正しいかどうかを確認するように親しみやすいリマインダーを与えるだけです。
ただし、おそらく、オートコンプリートがオンになっている 1 つの電子メール フィールドで十分です。ある時点で別のサイトで以前に電子メールを正しく入力した可能性があり、ブラウザはフィールドにその電子メールを入力するように提案します
<input type="email" name="email" required autocomplete="email">
登録プロセスに 2 番目のステップを追加します。最初のページは通常どおりですが、リロード時に 2 番目のページを表示して、もう一度メールを確認してください。それがそれほど重要であれば、ユーザーはそれを処理できます。
「キーダウン」リスナーを入力ボックスにアタッチして、Ctrl + V キーが押されているかどうかを検出し、押されている場合は、イベントを停止するか、入力ボックスの値を '' に設定できます。
ただし、右クリックして貼り付けたり、ブラウザの[編集]メニューから貼り付けたりすることはできません。「最後の長さ」カウンターをキーダウン リスナーに追加し、間隔を使用してフィールドの現在の長さをチェックし、最後のキーストロークから増加しているかどうかを確認する必要がある場合があります。
ただし、どちらもお勧めしません。貼り付けが無効になっているフォーム フィールドは、非常にイライラさせられます。1 回目でメールを正しく入力できるので、2 番目のボックスに貼り付ける権利を留保します。
簡単な解決策：登録プロセスを逆にするだけです。登録プロセスの最後に確認を要求する代わりに、登録プロセスの最初に確認を要求してください。つまり、登録プロセスは、電子メールアドレスだけを要求する単純なフォームから始まりました。送信すると、送信された電子メールアドレスに固有の確認ページへのリンクが記載された電子メール。ユーザーがそのページに移動すると、登録に関する残りの情報（ユーザー名、フルネームなど）が要求されます。
ウェブサイトは確認前に何も保存する必要がないため、これは簡単です。電子メールアドレスをキーで暗号化し、確認ページアドレスの一部として添付することができます。
指定された電子メールのホストの MX レコードの有効性を確認します。これにより、@ 記号の右側のエラーを排除できます。
フォームが送信された後、送信前および/またはサーバー側でAJAX呼び出しを使用してこれを行うことができます。
マウスまたは Ctrl+C / Ctrl+V キーの組み合わせを右クリックして操作を停止するなど、Javascript を使用してユーザーのアクションをキャプチャすることを提案する人もいます。しかし、これは明らかに最善または最も単純な解決策ではありません。このソリューションは、Javascript を使用したイベント キャプチャと共に、入力フィールド プロパティ自体に統合されています。
ブラウザのオートコンプリートを無効にするには、属性を入力フィールドに追加するだけです。次のようになります。
<input type="text" autocomplete="off">
そのフィールドのコピーと貼り付けを拒否する場合は、oncopy、onpaste、および oncut 呼び出しをキャプチャする Javascript イベントを追加し、次のように false を返すようにします。
<input type="text" oncopy="return false;" onpaste="return false;" oncut="return false;">
次のステップでは、onselectstart を使用して、ユーザーによる入力フィールドのコンテンツ選択を拒否しますが、注意してください: これは Internet Explorer でのみ機能します。上記の残りの部分は、Internet Explorer、Mozilla Firefox、Apple Safari (少なくとも Windows OS 上)、および Google Chrome など、すべての主要なブラウザーでうまく機能します。
Jquery を使用すると、1 つの単純なコードラインでこれを行うことができます。
HTML:
<input id="email" name="email">
コード：
$(email).on('paste', false);
JSfiddle: https://jsfiddle.net/ZjR9P/2/
UIWebView で CSS を使用するのはどうですか? 何かのようなもの
<style type="text/css">
<!—-
* {
-webkit-user-select: none;
}
-->
</style>
また、CSS http://rakaz.nl/2009/09/iphone-webapps-101-getting-safari-out-of-the-way.htmlを使用したブロック コピー アンド ペーストの詳細を読むこともできます 。
http://bookmarkchamp.comに対してこれと同様のことを行いました- ユーザーが何かを HTML フィールドにコピーしたことを検出したかったのです。私が思いついた実装は、フィールドを常にチェックして、突然大量のテキストがそこにあるかどうかを確認することでした。
つまり、1 ミリ秒前にテキストがなく、現在は 5 文字を超えている場合は、ユーザーがフィールドに何かを貼り付けた可能性があります。
これが Bookmarkchamp で機能することを確認したい場合 (登録が必要です)、URL フィールドに URL を貼り付けます (またはそこに URL をドラッグ アンド ドロップします)。
角度を使用している場合
<input type="number" (keydown)="refuseInvalid($event) (input)="refuseInvalid($event)" (paste)="refuseInvalid($event)"> </input>
次に、javascriptまたはtypescriptで
refuseInvalid(event) {
if (event.type == 'input' || event.type == 'paste') {
event.preventDefault()
return false;
}
if (["-", "+", "e", "."].includes(event.key)) {
event.preventDefault();
return false
}
}
の使用にご注意ください"."。小数点も許可されません。
メールアドレスの確認の問題を解決する方法は次のとおりです。
セキュリティを強化するには、コードの有効期間を制限し、登録プロセスで一度だけ許可する必要があります。また、悪意のあるロボットアプリケーションを防ぐために、最初のステップにキャプチャまたは同様のメカニズムを伴うことをお勧めします.
Hope below code will work :
<!--Disable Copy And Paste-->
<script language='JavaScript1.2'>
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>