Απαγορευση του copy – paste σε πεδιο με jQuery
Ολοι σιγουρα εχουμε μπει στη διαδικασια συμπληρωσης μιας φορμας σε καποιο website. Ειτε αυτη ηταν για registration ειτε για μια online αγορα. Εκει λοιπον χρειαστηκε να συμπληρωσουμε καποια στοιχεια και το πιθανοτερο ειναι να χρειαστηκε να πληκτρολογησουμε καπου δυο φορες πχ το email μας. Αν εχετε γραφτει σε πολλα website θα δειτε οτι καποια σας αφηνουν να κανετε αντιγραφη – επικολληση οτι εχετε γραψει απο το πρωτο πεδιο στο δευτερο. Καποια αλλα ομως οχι. Αυτο γινεται κυριως να αποφευθουν ανεπιθυμητα αποτελεσματα οπως, πληκτρολογηση του email λαθος στο πρωτο πεδιο και αντιγραφη του λανθασμενου email στο δευτερο πεδιο. Επειτα ο χρηστης κανει submit τη φορμα και το email δεν ερχεται ποτε.
Ενημερωτικα να σας πω, πως σε ενα απο τελευταια patch που βαλαμε στο site της εταιρειας διορθωνε αυτο το προβλημα. Περιπου 8000 (ναι 8000!) ατομα το μηνα πληκτρολογουσαν λαθος το email τους και το αντεγραφαν στο “Confirm email”! Ο κωδικας ειναι παρα πολυ απλος και βασιζεται στο .bind() method της jQuery. Μεσω αυτης μπορουμε να απενεργοποιησουμε την default λειτουργεια του event που θελουμε. Εν προκειμενω του copy-paste-cut. Το παρακατω παραδειγμα νομιζω δεν θελει περισσοτερες εξηγησεις:
<html>
<head>
<title>Copy paste not allowed!</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style type="text/css">
body{font-family: verdana; font-size: 12px;}
input{width: 300px;}
</style>
</head>
<body>
<h2>Disable copy - cut - paste demo. Example in jQuery. </h2>
Type something in this input field and try to do a copy or try to paste text.<br>
<input type="text" id="firstInput" placeholder="First input "><br><br>
Do the same for this field. Eg. try to copy/paste the text you typed in first field.<br>
<input type="text" id="secondInput" placeholder="Second input">
</body>
<script>
$(document).ready(function(){
$('#firstInput,#secondInput').bind("cut copy paste",function(e) {
e.preventDefault();
});
});
</script>
</html>