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

时间:2008-10-14 18:54:04

标签: javascript asp.net html textbox uppercase

我正在编写一个ASP.NET应用程序。我在webform上有一个文本框,我想强制任何用户类型为大写。我想在前端做这件事。您还应该注意,此文本框上有一个验证控件,因此我想确保该解决方案不会干扰ASP.NET验证。

澄清: 看来CSS文本转换使用户输入以大写形式显示。然而,在引擎盖下,由于验证控制失败,它仍然是小写的。你看,我的验证控件检查是否输入了有效的状态代码,但是我使用的正则表达式只适用于大写字符。

20 个答案:

答案 0 :(得分:51)

为什么不使用CSS和后端的组合?使用:

style='text-transform:uppercase' 

在TextBox上,在你的代码隐藏中使用:

Textbox.Value.ToUpper();

您还可以在验证程序上轻松更改正则表达式,以使用小写和大写字母。这可能比强迫它们更容易解决。

答案 1 :(得分:22)

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

.uppercase
{
    text-transform: uppercase;
}

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

答案 2 :(得分:9)

好的,经过测试,这是一个更好,更清洁的解决方案。

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

});

答案 3 :(得分:7)

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

答案 4 :(得分:6)

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

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

答案 5 :(得分:3)

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

答案 6 :(得分:2)

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

答案 7 :(得分:2)

文本转换 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"

答案 8 :(得分:2)

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

  1. 样式标记simple以大写形式显示字符,但控件值仍保持为小写
  2. 使用上面显示的字符代码的按键功能有点担心,例如在firefox chrome和safari中它将 Ctrl + V 的功能禁用到控件中。< / LI>
  3. 将字符级别用于大写的另一个问题也是没有将整个字符串翻译成大写字母。
  4. 我找到的答案是在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();
        }
    };
    

答案 9 :(得分:2)

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

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

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

答案 10 :(得分:2)

 style='text-transform:uppercase'

答案 11 :(得分:1)

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

答案 12 :(得分:1)

CSS可以在这里提供帮助。

style="text-transform: uppercase";"

这有帮助吗?

答案 13 :(得分:1)

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

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

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

像魅力一样!

答案 14 :(得分:1)

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

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

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

在服务器端使用

string UCstring = txtName.Text.ToUpper();

答案 15 :(得分:1)

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

答案 16 :(得分:0)

我意识到它有点晚了,但我找不到适合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>

答案 17 :(得分:0)

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

所以,沿着这些方向:

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

答案 18 :(得分:0)

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

答案 19 :(得分:0)

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

我的示例使用了丢失的焦点,问题未在键入时指定。如果在您的方案中这很重要,您可以触发更改。