Javascript 如何在ASP.NET文本框中强制输入大写？

我正在写一个ASP.NET应用程序。我在网络表单上有一个文本框，我想强制用户输入大写字母。我想在前端做这个。您还应该注意，此文本框上有一个验证控件，因此我希望确保解决方案不会干扰ASP.NET验证

澄清：

---

CSS文本转换似乎使用户输入显示为大写。然而，在引擎盖下，由于验证控制失败，它仍然是小写。您知道，我的验证控件检查是否输入了有效的状态代码，但是我使用的正则表达式仅适用于大写字符。

在文本框中使用CSS样式。您的CSS应该是这样的：

.uppercase
{
    text-transform: uppercase;
}

<asp:TextBox ID="TextBox1" runat="server" Text="" CssClass="uppercase"></asp:TextBox>;

。大写
{
文本转换：大写；
}
;

将文本框上的样式设置为？

JavaScript具有字符串的“toUpperCase（）”函数

因此，大致如下：

function makeUpperCase(this)
{
    this.value = this.value.toUpperCase();
}

---

CSS在这里可能会有所帮助

style="text-transform: uppercase";"

---

这有帮助吗？

在前端使用文本转换CSS，然后在验证之前在字符串服务器端使用toUpper方法。

我今天刚刚做了类似的事情。以下是修改后的版本：

<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>

函数setFormat（）{
var inp=document.getElementById（'ctl00\u MainContent\u txtInput'）；
var x=输入值；
inp.value=x.toUpperCase（）；
}
var inp=document.getElementById（'ctl00\u MainContent\u txtInput'）；
inp.onblur=函数（evt）{
setFormat（）；
};

---

基本上，脚本会附加一个事件，当文本框失去焦点时触发该事件。

为什么不结合使用CSS和后端呢？使用：

style='text-transform:uppercase' 

在文本框和代码隐藏中使用：

Textbox.Value.ToUpper();

---

您还可以轻松地在验证器上更改正则表达式，以使用小写和大写字母。这可能是比强制使用大写字母更容易的解决方案。

您可以截取按键事件，取消小写事件，并将其大写版本附加到输入：

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。您可以看到它的作用。

功能上限（ustr）
{
var str=ustr.value；
ustr.value=str.toUpperCase（）；
}
功能降低（ustr）
{
var str=ustr.value；
ustr.value=str.toLowerCase（）；
}
键入小写字母
键入大写字母

我会使用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>

$（文档）.ready（函数（）{
$（“#txt”）.keydown（函数（e）{
如果（e.keyCode>=65&e.keyCode
**我希望：
**
我意识到这有点晚了，但我找不到一个适用于ASP.NET AJAX的好答案，所以我修复了上面的代码：

function ToUpper() {
        // So that things work both on FF and IE
        var evt = arguments[0] || event;
        var char = String.fromCharCode(evt.which || evt.keyCode);

        // Is it a lowercase character?
        if (/[a-z]/.test(char)) {
            // convert to uppercase version
            if (evt.which) {
                evt.which = char.toUpperCase().charCodeAt(0);
            }
            else {
                evt.keyCode = char.toUpperCase().charCodeAt(0);
            }
        }

        return true;
    }

这样使用：

       <asp:TextBox ID="txtAddManager" onKeyPress="ToUpper()" runat="server" 
             Width="84px" Font-Names="Courier New"></asp:TextBox>

我已经在四个流行的浏览器版本上对此问题做了一些分析

样式标记simple以大写形式显示字符，但控制值仍然保持为小写
使用上面显示的字符代码的按键功能有点令人担忧，因为在firefox chrome和safari中，它禁用了将Ctrl+V输入控件的功能
将字符级转换为大写的另一个问题是不能将整个字符串转换为大写
我找到的答案是在keyup上结合样式标记实现这一点

<-- 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();
    }
};


window.onload=函数（）{
var输入=document.frmTest.textBoxUCase；
input.onkeyup=函数（）{
input.value=input.value.toUpperCase（）；
}
};

这是一个对我有效的解决方案


您必须从中获取JavaScript，然后才能开始

效果很好！
好的，经过测试，这里有一个更好、更干净的解决方案

$('#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);

});


我使用一个简单的单内联语句

<asp:TextBox ID="txtLocatorName" runat="server"
 style="text-transform:uppercase" CssClass="textbox"  
 TabIndex="1">
</asp:TextBox>

这是一种可重用的方法。任何数量的文本框都可以通过这种方式完成，而不需要命名它们。
可以通过更改docReady中的选择器来实现页面范围的解决方案

我的示例使用了失去焦点，问题没有指定它们的类型。如果这在您的场景中很重要，您可以触发更改。
文本转换

CSS属性指定如何将元素的文本大写。它可用于使文本显示为全大写或全小写

CssClass

WebControl.CssClass属性

您可以了解更多有关它的信息-



使用
Style=“文本转换：大写；”
或
CssClass=“大写”
这只会在之后更改，不会在他们键入时更改。您可以将此函数附加到文本区域的onchange事件，它会动态更新它，尽管会有点慢。CSS是一种方法。@diodeus-如果您使用TextChange事件，那么它会在顶部发生。@Tom-CSS确实会更改默认值吗正在使用ASCI或它是如何显示的？@Stephen-这是一个非常好的问题！我创建了一个小页面来测试这一点，看起来CSS只是改变了它的显示方式，而不是底层的ASCII。@Tom-这就是我的想法，因此，它需要通过JS而不是CSS来实现，以便验证程序能够正确启动。你是故意的吗将您的正则表达式限制为仅使用大写字符？根据您的措辞，您可能不知道正则表达式实现通常支持区分大小写的开关。我不是正则表达式专家。除了将每个状态代码复制两次之外，我还知道一种在正则表达式中支持大小写状态代码比较的方法（大写和小写）。我认为将输入框转换为大写会更简洁。不用担心-我建议使用以下内容（C#），而不是修改用户输入：Regex re=new Regex（“myExpression”，RegexOptions.IgnoreCase）；我也有同样的问题。我将文本转换设置为大写以设置外观
<-- 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();
    }
};

$('#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);

});

  <telerik:RadTextBox ID="txtCityName" runat="server" MaxLength="50" Width="200px"
                            Style="text-transform: uppercase;">

<asp:TextBox ID="txtLocatorName" runat="server"
 style="text-transform:uppercase" CssClass="textbox"  
 TabIndex="1">
</asp:TextBox>

string UCstring = txtName.Text.ToUpper();

     $().ready(docReady);

     function docReady() {

            $("#myTextbox").focusout(uCaseMe);
     }

     function uCaseMe() {

            var val = $(this).val().toUpperCase();

            // Reset the current value to the Upper Case Value
            $(this).val(val);
        }