问题描述

我正在编写一个 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 库。

第九种方案

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

  1. style 标签简单显示大写字母,但控件值仍然保持为小写

  2. 使用上面显示的 char 代码的按键功能有点担心,因为在 firefox chrome 和 safari 它禁用功能 Ctrl + V 进入控件。

  3. 使用字符级别到大写字母的另一个问题也不是将整个字符串转换为大写字母。

  4. 我发现的答案是在键盘上结合样式标签来实现。

    <-- 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 辅助翻译的英文资料结果。如果您对结果不满意,可以加入我们改善翻译效果:薇晓朵技术论坛