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

Question

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

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

score 58 · Accepted Answer

为什么不使用 CSS 和后端的组合呢？利用：

style='text-transform:uppercase'

在 TextBox 上，并在您的代码隐藏中使用：

Textbox.Value.ToUpper();

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

score 23 · Accepted Answer

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

.uppercase
{
    text-transform: uppercase;
}

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

score 9 · Accepted Answer

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

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

});

score 8 · Accepted Answer

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

score 6 · Accepted Answer

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

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。您可以在这里看到它的实际效果。

score 3 · Accepted Answer

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

score 3 · Accepted Answer

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

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

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

在服务器端使用

string UCstring = txtName.Text.ToUpper();

score 3 · Accepted Answer

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

类

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"

score 2 · Accepted Answer

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

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

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

score 2 · Accepted Answer

2

 style='text-transform:uppercase'

于 2008-10-14T19:00:19.757 回答

score 2 · Accepted Answer

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

样式标签简单以大写显示字符，但控件值仍保持为小写
使用上面显示的字符代码的按键功能有点担心，因为在 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();
    }
};

score 2 · Accepted Answer

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

score 1 · Accepted Answer

1

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

于 2008-10-14T18:57:19.997 回答

score 1 · Accepted Answer

1

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

style="text-transform: uppercase";"

这有帮助吗？

于 2008-10-14T19:03:48.000 回答

score 1 · Accepted Answer

在前端使用 text-transform CSS，然后在验证之前在字符串服务器端使用 toUpper 方法。

score 1 · Accepted Answer

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

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

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

奇迹般有效！

score 0 · Accepted Answer

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

所以，沿着这些思路：

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

     $().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 中的选择器可以实现页面范围的解决方案。

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

score -1 · Accepted Answer

最少 8 个字符，至少 1 个字母和 1 个数字 <asp:TextBox ID="txtPolicy1" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="Regex1" runat="server" ControlToValidate="txtPolicy1" ValidationExpression="^(?=. [A-Za-z])(?=. \d)[A-Za-z\d]{8,}$" ErrorMessage="密码必须包含：最少 8 个字符，至少 1 个字母和 1 个数字" ForeColor="Red" />

有效密码示例：pass1234 或 PaSs1234 或 PASS1234

最少 8 个字符，至少 1 个字母、1 个数字和 1 个特殊字符 <asp:TextBox ID="txtPolicy2" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="Regex2" runat="server" ControlToValidate ="txtPolicy2" ValidationExpression="^(?=. [A-Za-z])(?=. \d)(?=. [$@$!% #?&])[A-Za-z\d $@$!%*#?&]{8,}$" ErrorMessage="最少 8 个字符，至少 1 个字母、1 个数字和 1 个特殊字符" ForeColor="Red" />

有效密码示例：pass@123 OR PaSS#123 OR PASS@123

最少 8 个字符，至少 1 个大写字母、1 个小写字母和 1 个数字 <asp:TextBox ID="txtPolicy3" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="Regex3" runat="server" ControlToValidate="txtPolicy3" ValidationExpression="^(?=. [az])(?=. [AZ])(?=.*\d)[a-zA-Z\d]{8,}$" ErrorMessage= "密码必须包含：至少 8 个字符，至少 1 个大写字母、1 个小写字母和 1 个数字" ForeColor="Red" />

有效密码示例：PaSs1234 或 pass1234

最少 8 个字符，至少 1 个大写字母、1 个小写字母、1 个数字和 1 个特殊字符

<asp:TextBox ID="txtPolicy4" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="Regex4" runat="server" ControlToValidate="txtPolicy4" ValidationExpression="^(?=. [az ])(?=. [AZ])(?=. \d)(?=. [$@$!% ?&])[A-Za-z\d$@$!% ?&]{8, }" ErrorMessage="密码必须包含：最少 8 个字符，至少 1 个大写字母、1 个小写字母、1 个数字和 1 个特殊字符" ForeColor="Red" />

有效密码示例：PaSs@123 或 pAss@123

最少 8 个和最多 10 个字符，至少 1 个大写字母、1 个小写字母、1 个数字和 1 个特殊字符

<asp:TextBox ID="txtPolicy5" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="Regex5" runat="server" ControlToValidate="txtPolicy5" ValidationExpression="^(?=. [az ])(?=. [AZ])(?=. \d)(?=. [$@$!% ?&])[A-Za-z\d$@$!% ?&]{8, 10}" ErrorMessage="密码必须包含：最少 8 个和最多 10 个字符，至少 1 个大写字母、1 个小写字母、1 个数字和 1 个特殊字符" ForeColor="Red" />

有效密码示例：PaSs@123

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

21 回答 21

Related

Reference