2013年7月23日 星期二

ASP.NET、HTML 限制TextBox輸入的資料

重點紀錄與整理:實作TextBox限制使用者只能輸入英文及數字符號、限制使用者不能剪下複製貼上、運用css限制TextBox使輸入法失效。

Default5.aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default5.aspx.vb" Inherits="Default5" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="jquery-2.0.1.min.js"></script>
<script>
$(function () {
$('#TextBox1').bind('cut copy paste', function (e) {
e.preventDefault(); //取消動作
alert('禁止剪下複製貼上');
});
$('#Html_TextBox').bind('cut copy paste', function(e) {
    e.preventDefault(); //取消動作
    alert('禁止剪下複製貼上');
});
});
</script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        實作TextBox限制只能輸入英文及數字符號、限制使用者不能剪下複製貼上、運用css限制TextBox使輸入法失效<br />
        以下為ASP.NET TextBox控制項<br />
        <asp:TextBox ID="TextBox1" runat="server" Height="110px" style="ime-mode:Disabled;"
            TextMode="MultiLine" Width="276px"></asp:TextBox><br />
        以下為HTML TextBox多行輸入控制項<br />
        <textarea rows="10" style="width: 271px;ime-mode:Disabled;" id="Html_TextBox" onkeyup="value=value.replace(/^a-zA-Z0-9/)"></textarea>
        <asp:Button ID="Button2" runat="server" Text="Button" />
    </div>
    </form>
</body>
</html>

Default5.aspx.vb
Partial Class Default5
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        '為ASP.NET TextBox控制項加入客戶端onkeyup事件用運javascript的replace函式搭配正規表示式來限制使用者輸入的資料
        TextBox1.Attributes("onkeyup") = "value=value.replace(/^a-zA-Z0-9/)"
    End Sub

End Class

說明
1. style="ime-mode:Disabled;" 利用CSS來限制使用者僅能輸入英文和數字及符號;其實在程式碼當中也有寫到JavaScript語法的replace函式來限制使用者僅能輸入英文和數字及符號,在這裡就看您想用哪一種方法來限制使用者所輸入的資料

資料來源:
[jQuery] TextBox中禁止剪下複製貼上
輕鬆解決網頁只能輸入英數字的問題

沒有留言:

張貼留言