ASP.NET กับ jQuery: ปิดการ cut/copy/paste บน TextBox

ความต้องการ …

เมื่อมีความต้องการว่า ตอนขอข้อมูลที่สำคัญจากผู้ใช้ เช่น รหัสผ่าน, ข้อมูลบัตรเครดิตและ หมายเลข PIN การทำธุรกรรมที่ใช้ในการบริการธนาคารทางอินเทอร์เน็ตและอื่น ๆ ผู้ใช้จะต้องกรอกข้อมูลเข้าไปด้วยตนเอง แทนที่จะมาจากวิธีการกรอกข้อมูลด้วยวิธีอื่น คือการ cut/copy/paste บทความนี้จะแสดงวิธีทำให้ไม่สามารถ cut/copy/paste บน TextBox ได้ โดยใช้ jQuery ครับ

เตรียมตัวให้พร้อม …

1. เพิ่มเวป form ใหม่ลงใน projects ของเราตั้งชื่อว่า Discutcopypast.aspx

2. สร้าง form เปลี่ยน password ง่ายๆขึ้นมา

<form id=”form1″ runat=”server”>
<div align=”center”>
<fieldset style=”width:400px;height:180px;”>
<table cellpadding=”3″ cellspacing=”3″ border=”0″>
<tr><td colspan=”2″>เปลี่ยน PASSWORD</td></tr>
<tr><td> <asp:Label id=”lblCurrentPwd” Text=”Password ปัจจุบัน: ” runat=”server”/></td>
<td> <asp:TextBox ID=”txtCurrentPwd” Width=”200px” runat=”server” TextMode=”Password”></asp:TextBox></td></tr>
<tr><td><asp:Label id=”lblNewPwd” Text=”Password ใหม่:” runat=”server”/></td>
<td><asp:TextBox ID=”txtNewPwd” Width=”200px” runat=”server” TextMode=”Password”></asp:TextBox></td></tr>
<tr><td><label id=”lblConfirmNewPwd” runat=”server”>ยืนยัน Password ใหม่:</label></td>
<td><asp:TextBox ID=”txtConfirmNewPwd” Width=”200px” runat=”server” TextMode=”Password”></asp:TextBox></td></tr>
<tr><td></td><td><asp:Button ID=”btnSubmit” runat=”server” Text=”ตกลง” />
<asp:Button ID=”btnReset” runat=”server” Text=”เริ่มใหม่” /></td></tr>
</table>
</fieldset>
</div>
</form>

3. ลอง run ดูหน้าจอ จะแสดงคล้ายๆข้างล่าง


วิธีการทำ …

1. ใน function document.ready() ในบร็อกของ jQuery script ให้ผูกกับ cut, copy และ paste กับ textbox password ใหม่
       $(‘#<%=txtNewPwd.ClientID%>’).bind(‘cut copy paste’, function(e) {
2. ให้ override พฤติกรรม default ของ cut, copy และ paste
       e.preventDefault();
3. แสดงข้อความข้อมูล
       alert(“ไม่ยอมให้ Cut / Copy / Paste ใน textbox นี้”);
});
4. ทำแบบข้างบนซ้ำกับ textbox ยืนยัน Password ใหม่
$(‘#<%=txtConfirmNewPwd.ClientID%>’).bind(‘cut copy paste’, function(e) {
e.preventDefault();
alert(“ไม่ยอมให้ Cut / Copy / Paste ใน textbox นี้ด้วย!”);
});
ดังนั้นวิธีแก้ปัญหานี้ โดย jQuery ที่สมบูรณ์เป็นดังนี้
<script type=”text/javascript”>
$(document).ready(function() {
$(‘#<%=txtNewPwd.ClientID%>’).bind(‘cut copy paste’, function(e) {
e.preventDefault();
alert(“Cut / Copy / Paste disabled in this textbox”);
});
$(‘#<%=txtConfirmNewPwd.ClientID%>’).bind(‘cut copy paste’, function(e) {
e.preventDefault();
alert(“Cut / Copy / Paste disabled in this textbox too!”);
});
});
</script>

วิธีการทำงาน …

run web page ขึ้นมา ลองพยายามทำ cut/copy/paste บน field ของ Password ใหม่ และ ยืนยัน Password ใหม่ page นี้จะ throw ข้อความ แสดงคล้าย screen ข้างล่างนี้

เพียงเท่านี้เราก็ปิดการ cut/copy/paste บน TextBox ได้แล้ว

ขอบคุณครับ

Advertisements

#asp-net, #jquery