問題描述
我正在編寫一個 ASP.NET 應用程式。我在 webform 上有一個文字框,我想強制任何使用者型別大寫。我想在前端這樣做。您還應該注意,這個文字框上有一個驗證控制元件,所以我想確保解決方案不會干擾 ASP.NET 驗證。
澄清:看起來 CSS 文字轉換使使用者輸入顯示為大寫。然而,在引擎蓋下,當驗證控制失敗時仍然是小寫。您會看到,我的驗證控制檢查是否輸入了有效的狀態程式碼,但是我正在使用的正規表示式僅適用於大寫字元。
最佳解決方案
為什麼不使用 CSS 和後端的組合?使用:
style='text-transform:uppercase'
在 TextBox 上,並在你的程式碼中使用:
Textbox.Value.ToUpper();
您還可以輕鬆地將驗證器上的正規表示式更改為使用小寫和大寫字母。這可能比強制大寫更容易解決。
次佳解決方案
在文字框中使用 CSS 樣式。你的 CSS 應該是這樣的:
.uppercase
{
text-transform: uppercase;
}
<asp:TextBox ID="TextBox1" runat="server" Text="" CssClass="uppercase"></asp:TextBox>;
第三種解決方案
好的,經過測試,這裡是一個更好,更乾淨的解決方案。
$('#FirstName').bind('keyup', function () {
// Get the current value of the contents within the text box
var val = $('#FirstName').val().toUpperCase();
// Reset the current value to the Upper Case Value
$('#FirstName').val(val);
});
第四種方案
您可以攔截按鍵事件,取消小寫字母,並將其大寫版本附加到輸入:
window.onload = function () {
var input = document.getElementById("test");
input.onkeypress = function () {
// So that things work both on Firefox and Internet Explorer.
var evt = arguments[0] || event;
var char = String.fromCharCode(evt.which || evt.keyCode);
// Is it a lowercase character?
if (/[a-z]/.test(char)) {
// Append its uppercase version
input.value += char.toUpperCase();
// Cancel the original event
evt.cancelBubble = true;
return false;
}
}
};
這可以在 Firefox 和 Internet Explorer 中使用。你可以看到它在行動 here 。
第五種方案
**I would do like:
<asp:TextBox ID="txtName" onkeyup="this.value=this.value.toUpperCase()" runat="server"></asp:TextBox>**
第六種方案
<!-- Script by hscripts.com -->
<script language=javascript>
function upper(ustr)
{
var str=ustr.value;
ustr.value=str.toUpperCase();
}
function lower(ustr)
{
var str=ustr.value;
ustr.value=str.toLowerCase();
}
</script>
<form>
Type Lower-case Letters<textarea name="address" onkeyup="upper(this)"></textarea>
</form>
<form>
Type Upper-case Letters<textarea name="address" onkeyup="lower(this)"></textarea>
</form>
第七種方案
我今天剛剛做了類似的事情。這是修改版本:
<asp:TextBox ID="txtInput" runat="server"></asp:TextBox>
<script type="text/javascript">
function setFormat() {
var inp = document.getElementById('ctl00_MainContent_txtInput');
var x = inp.value;
inp.value = x.toUpperCase();
}
var inp = document.getElementById('ctl00_MainContent_txtInput');
inp.onblur = function(evt) {
setFormat();
};
</script>
基本上,指令碼附加在文字框失去焦點時觸發的事件。
第八種方案
我會這樣做使用 jQuery 。
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#txt").keydown(function(e) {
if (e.keyCode >= 65 & e.keyCode <= 90) {
val1 = $("#txt").val();
$("#txt").val(val1 + String.fromCharCode(e.keyCode));
return false;
}
});
});
</script>
您必須在/script 資料夾中具有 jQuery 庫。
第九種方案
我對四個流行瀏覽器版本的這個問題做了一些分析。
-
style 標籤簡單顯示大寫字母,但控制元件值仍然保持為小寫
-
使用上面顯示的 char 程式碼的按鍵功能有點擔心,因為在 firefox chrome 和 safari 它停用功能
Ctrl+V進入控制元件。 -
使用字元級別到大寫字母的另一個問題也不是將整個字串轉換為大寫字母。
-
我發現的答案是在鍵盤上結合樣式標籤來實現。
<-- form name="frmTest" --> <-- input type="text" size=100 class="ucasetext" name="textBoxUCase" id="textBoxUCase" --> <-- /form --> window.onload = function() { var input = document.frmTest.textBoxUCase; input.onkeyup = function() { input.value = input.value.toUpperCase(); } };
參考文獻
注:本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意,可以加入我們改善翻譯效果:薇曉朵技術論壇。