第一種方式，是透過 jQuery 與 javascript。在 javascript 裡有兩個 function: toUpperCase() 、toLowerCase()，分別是將字串轉為大寫或小寫。我攔截使用者敲鍵盤的 keyup 事件，並在這事件裡進行轉換的動作。最後用 jQuery 尋找所有有定義 class 名稱為 upper 或 lower 的物件，可以適用這次的調整。
第二種方式，是透過 style 屬性裡的 text-transform 來產生大寫或小寫的效果，舉例來說，標記為 style="text-transform: uppercase"，則你輸入的文字都會自動被轉成大寫，而 style="text-transform: lowercase" 則是小寫。
以上兩種方式都能符合自己的需求，但使用 style 的作法相較之下，真的簡單多了。
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script>
$(function(){
$(".upper").keyup(function(evt){
var vOri=$(this).val();
var vNew=vOri.toUpperCase();
$(this).val(vNew);
});
$(".lower").keyup(function(evt){
var vOri=$(this).val();
var vNew=vOri.toLowerCase();
$(this).val(vNew);
});
});
</script>
</head>
<body>
ToUpper(JQuery):<input type="text" id="tbxTest1" class="upper" ><br>
ToLower(JQuery):<input type="text" id="tbxTest2" class="lower" ><br>
ToUpper(Style):<input type="text" id="tbxTest3" style="text-transform: uppercase" ><br>
ToLower(Style):<input type="text" id="tbxTest4" style="text-transform: lowercase" ><br>
</body>
</html>
補充：20110106
經過實際專案的測試，發現上述兩種方式，實際上是有點差異的。我先說透過 style 屬性的方式，這方式只是讓你的結果看起來像是已經轉換成大寫或小寫，但實際不是。所以如果你不介意儲存資料時是否一定要是大寫或小寫，那使用 style 屬性的方式並無太大問題。反之，如果你很在意存入資料庫時必須是大寫或小寫，那就不可以用 style 屬性方式了，得採用 jquery + javascript。
在上圖中，我每個輸入方塊都是輸入 aaaaa ，壓下 btn 按鈕並將畫面上的值印出來。可以發現 ToUpper(JQuery) 的值是符合我的期待，但 ToUpper(Style)就不同了，畫面上顯示 AAAAA，但它裡面的結果卻還是我原先輸入的 aaaaa。所以，在使用這轉大小寫功能時，得留意這兩者用法的差別了。
Ref:
01.JavaScript toUpperCase() Method
http://www.w3schools.com/jsref/jsref_touppercase.asp
02.How can I force input to uppercase in an asp.net textbox?
http://stackoverflow.com/questions/202368/how-can-i-force-input-to-uppercase-in-an-asp-net-textbox
沒有留言:
張貼留言