気ままに気ままのエンジニアブログ

定期的に得た知見を気ままに発信中

入力フォームでよく見るコピペ禁止の実装方法

こんにちは。

もう8月も終わりますね。なんか寂しくなります。

どうもハチマキです。

はじめに

入力フォームなどで、コピペを禁止する方法について書いていきます。
ある3つを定義するだけで、簡単にコピペ防止ができます。

本日の概要 : 入力フォームのコピペ禁止の実装方法

事象

入力フォーム作成時に、ユーザのメールアドレスの入力ミスを減らしたい。
そんな時のソリューションとしてよく見るのは、確認用メールアドレスを打ち込みメアドを2度入力するケースです。

1つ目に入力したアドレスを2つ目にコピペできてしまうと、確認用の意味が全くないので、このようなことを防ぐために確認用メールアドレスをコピペ禁止にしたい。

実装方法

下記3つをfalse(無効)に定義するだけで、コピペ禁止になります。

  • oncopy →コピーをしたときの動作
  • onpaste →ペーストをしたときの動作。
  • oncontextmenu →右クリックメニューを出そうとしたときの動作
= form_for @user do |f|
 = f.label :email_confirmation do
  メールアドレス(確認用)
 = f.text_field :email_confirmation, placeholder: '※test',
                    oncopy: 'return false',
                    onpaste: 'return false',
                    oncontextmenu: 'return false'

これだけで完了です!