[jQuery]フォームでのコピー＆ペーストを無効にする方法

jQuery

2020.01.05

Webフォームでのコピー＆ペースト操作を制限したい場合、jQueryを使って簡単に無効化することができます。

この機能は、特定の入力欄でのデータ入力を手動に限定したい場合や、不正なデータ入力を防止したい場合に役立ちます。

この記事では、jQueryを用いてフォーム内でコピー＆ペーストを無効にする方法を紹介します。

jQuery
HTML

jQuery

$(function(){
    $('.nocopy').on('copy cut',function(e){
        e.preventDefault();
    });
    $('.nopaste').on('paste',function(e){
        e.preventDefault();
    });
});

$(function(){

$('.nocopy').on('copy cut',function(e){

e.preventDefault();

});

$('.nopaste').on('paste',function(e){

e.preventDefault();

});

HTML

<form> 
<div class="form-group">
    <label for="email">メールアドレス</label>
    <input type="email" class="form-control nocopy" id="email" name="email1">
  </div>
<div class="form-group">
    <label for="email2">メールアドレス（確認用）</label>
    <input type="email" class="form-control nopaste" id="email2" name="email2">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>