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

【问题标题】：How can I force input to uppercase in an ASP.NET textbox?如何在 ASP.NET 文本框中强制输入为大写？
【发布时间】：2010-09-17 04:08:05
【问题描述】：

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

说明： 似乎 CSS 文本转换使用户输入以大写形式显示。但是，在后台，由于验证控制失败，它仍然是小写字母。你看，我的验证控件检查是否输入了有效的状态代码，但是我使用的正则表达式只适用于大写字符。

【问题讨论】：

您是否有意将您的正则表达式限制为仅使用大写字符？根据您的措辞，您可能不知道正则表达式实现通常支持区分大小写的开关。
我不是正则表达式专家。除了将每个状态代码复制两次（大写和小写）之外，我知道在正则表达式中支持大写和小写状态代码比较的已知方法。我认为将输入框转换为大写会更干净。
不用担心 - 我建议使用类似以下的 (C#) 而不是修改用户输入：Regex re = new Regex("myExpression", RegexOptions.IgnoreCase);
我也有同样的问题。我将 text-transform 设置为大写，以便在用户键入时设置文本框的外观，并且一旦文本框失去焦点，我将使用 onblur 事件将值设置为大写。然而，验证器对这个值不满意。您找到解决此问题的方法了吗？
为什么不提供状态码的下拉菜单呢？

标签： javascript asp.net html textbox uppercase

【解决方案1】：

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

style='text-transform:uppercase'

在文本框上，并在您的代码隐藏中使用：

Textbox.Value.ToUpper();

您还可以轻松地将验证器上的正则表达式更改为使用小写和大写字母。这可能是比对它们强制大写更简单的解决方案。

【讨论】：

我会选择 ToUpper()。为什么要对最终用户实施此类限制？这不是一个友好的用户界面。取用户给你的任何东西，自己把它变成大写。
我也会这样做。在 Javascript 中乱搞直到你有你想要的东西是更多的工作，你需要启用 Javascript，这对于罗夏的解决方案来说是完全不必要的。
与“ToUpper()”方法一起使用的当前属性是“Text”而不是“Value”，因此您必须使用 TextBox.Text.ToUpper();。

【解决方案2】：

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

.uppercase
{
    text-transform: uppercase;
}

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

【讨论】：

使用纯 CSS 解决方案时，REGEX 验证器仍然会失败。

【解决方案3】：

好的，经过测试，这里有一个更好、更清洁的解决方案。

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

});

【讨论】：

如果用户完成输入然后考虑编辑，则此解决方案存在问题。如果使用更正并重新键入一个字符，则光标再次设置为字符串的末尾，因为文本框的值被重新设置。

【解决方案4】：

**I would do like:
<asp:TextBox ID="txtName" onkeyup="this.value=this.value.toUpperCase()" runat="server"></asp:TextBox>**

【讨论】：

【解决方案5】：

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

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看到它。

【讨论】：

但是如果用户尝试在文本中间键入它就不起作用了。

【解决方案6】：

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

【讨论】：

【解决方案7】：

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

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

如果你不想使用 css 类，你可以使用内联样式语句。（这个只是明显地大写）:)

在服务器端使用

string UCstring = txtName.Text.ToUpper();

【讨论】：

已提供此答案，问题中解释了其不充分的原因。
没关系。其他人可以从中受益。虽然我认为它不应该被接受。
text-transform 只会改变外观，不会强制底层值变为大写。

【解决方案8】：

文本转换 CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase

CssClass

WebControl.CssClass 属性

您可以了解更多信息 - https://developer.mozilla.org/en/docs/Web/CSS/text-transform

https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.webcontrol.cssclass(v=vs.110).aspx

使用Style="text-transform: uppercase;"或CssClass="upper"

【讨论】：

在哪里？它有什么帮助？有参考吗？
如果它对您不起作用，您可能不会将其发布为答案。但是，您究竟将这些属性放在了哪里？您是如何得知text-transform 或CssClass 的？您可以通过添加此类信息来改进您的答案。

【解决方案9】：

 style='text-transform:uppercase'

【讨论】：

text-transform 只改变外观，不会强制底层值大写

【解决方案10】：

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

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

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

【讨论】：

我不明白。您从哪里获得 id 'ctl00_MainContent_txtInput'？
ASP.NET 会翻译您的 ID。您可以通过查看您正在使用的页面的源来找出它们。 ctl00 是通用前缀（但可以不同），MainContent 恰好是放置控件的表单的名称。
在迁移到更新版本的 ASP.NET 时，这可能会中断吗？
可能，但您始终可以使用唯一的文本框名称和 jQuery 之类的 JavaScript 框架，并找到唯一名称与模式匹配的控件。我试图让示例代码保持简单。
有更好的方法来获取客户端 ID -> 。这将呈现正确的 ID。

【解决方案11】：

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

【讨论】：

在文本中间输入时除外

【解决方案12】：

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

style标签simple将字符显示为大写，但控件值仍为小写
使用上面显示的字符代码的按键功能有点担心，因为在 Firefox chrome 和 safari 中它禁用了 Ctrl + V 进入控件的功能。
使用字符级别转换为大写的另一个问题也不是将整个字符串转换为大写。

我找到的答案是在 keyup 上结合 style 标签实现这个。

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

【讨论】：

【解决方案13】：

将文本框的样式设置为text-transform: uppercase?

【讨论】：

阅读问题本身的说明。这只会改变外观，但不会改变文本框中的基础值。

【解决方案14】：

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

【讨论】：

失败的验证控件在客户端运行。

【解决方案15】：

CSS 在这里可能会有所帮助。

style="text-transform: uppercase";"

这有帮助吗？

【讨论】：

text-transform 只改变外观，不会强制底层值大写

【解决方案16】：

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

http://plugins.jquery.com/project/bestupper

您必须从 http://plugins.jquery.com/files/jquery.bestupper.min.js.txt 获取 JavaScript，然后就可以了。

像魅力一样工作！

【讨论】：

【解决方案17】：

我意识到这有点晚了，但我找不到适用于 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>

【讨论】：

谢谢。我将此代码发布在 stackoverflow.com/questions/8026535/… 中。如果使用粘贴命令（Ctrl+V 或从上下文菜单），则会失败。如何使它也可以与粘贴命令一起使用？

【解决方案18】：

JavaScript 具有字符串的“toUpperCase()”函数。

所以，大致是这样的：

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

【讨论】：

那只会在他们输入之后改变它。
您可以将此函数附加到文本区域的 onchange 事件中，它会即时更新它，尽管它会有点慢。恕我直言，CSS 是必经之路。
@diodeus - 如果您使用 TextChange 事件，那么它将在它们顶部发生。 @Tom - CSS 是否真的改变了底层 ASCI 或者只是它的显示方式？
@Stephen - 这是一个非常好的问题！我创建了一个小页面来测试这一点，似乎 CSS 只会改变它的显示方式而不是底层 ASCII。
@Tom - 这就是我的想法，因此，它需要通过 JS 而不是 CSS 发生，以便验证器正确触发

【解决方案19】：

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

【讨论】：

【解决方案20】：

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

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

我的示例使用了失去焦点，问题没有在他们键入时指定。如果这在您的场景中很重要，您可以触发更改。

【讨论】：