如何在表單欄位中禁用貼上及拖放功能

您有沒有遇過無法在表單欄位中直接貼上字串的網站，通常這種禁止貼上的作法，都是應該在帳號密碼有關的欄位中。其實這種禁用貼上的作法還滿討人厭的，尤其是現在很多網站的作法都是要求設定"高強度的密碼"，密碼設定變複雜、輸入錯誤的機會也變大。如果無法直接貼上、只能一個字一個字的慢慢打、真是滿煩人的。

今天這篇文章就是要跟大家分享、這個討人厭的禁止貼上功能要怎麼做。

從這篇文章你會知道：

使用Javascript對整個網頁禁用剪下、複製、貼上及拖放功能
- 使用Javascript對表單欄位禁用貼上及拖放功能
使用jQuery對整個網頁禁用剪下、複製、貼上及拖放功能
- 使用jQuery對表單欄位禁用貼上及拖放功能

如何使用Javascript在網頁中禁用剪下、複製、貼上及拖放功能

我們可以使用 oncut、oncpay、onpaste這些事件屬性來對網頁元素禁用剪下、複製、貼上，還可以使用 ondrag 和 ondrop 事件屬性禁用拖放。

oncut="return false"
oncopy="return false"
onpaste="return false"
ondrag="return false"
ondrop="return false"

底下就是幾個示範的實例：

一、對整個網頁禁用剪下、複製、貼上及拖放功能

<body oncut="return false" oncut="return false" oncopy="return false" onpaste="return false" ondrag="return false" ondrop="return false">
    ......
</body>

若是不想寫進HTML可以換個寫法

<script>
    document.addEventListener('cut', e => e.preventDefault());
    document.addEventListener('copy', e => e.preventDefault());
    document.addEventListener('paste', e => e.preventDefault());
    document.addEventListener('drag', e => e.preventDefault());
    document.addEventListener('drop', e => e.preventDefault());
</script>

二、對表單欄位禁用貼上及拖放功能

在實作上、通常只會有表單欄位禁用貼上及拖放功能、因此底下的範例比較單純。

<input type="text" onpaste="return false;" ondrop="return false;" autocomplete="off" />

換個寫法

<form action="/action_page.php">
    <input id="no-paste" type="text" name="testing" autocomplete="off">
</form>
<script>
    document.getElementById("no-paste").addEventListener('paste', e => e.preventDefault());
    document.getElementById("no-paste").addEventListener('drop', e => e.preventDefault());
</script>

如何使用jQuery在網頁中禁用剪下、複製、貼上及拖放功能

我們可以使用 jQuery bind()函數來禁用剪下、複製、貼上及拖放功能，記得在使用jQuery前要先加載jQuery library

一、對整個網頁禁用剪下、複製、貼上及拖放功能

$(document).ready(function() {
    $('body').bind('cut copy paste drag drop', function(event) {
   	 event.preventDefault();
    });
});

二、對表單欄位禁用貼上及拖放功能

$(document).ready(function() {
    $('input').bind('paste drop', function(event) {
        event.preventDefault();
    });
});

雖然很討厭這個禁止貼上的功能、但是秉持著求知的精神、我們還是要搞清楚他是怎麼做到的，並且跟大家分享。

以上就是歐斯瑞本次如何在表單欄位中禁用貼上及拖放功能的分享

訂閱歐斯瑞的電子報、追蹤臉書粉絲團及IG，收到更多相關實用資訊！也歡迎與我們聯繫。

前端開發

如何在表單欄位中禁用貼上及拖放功能