如何在ASP中强制输入大写。网络文本框?

I'm writing an ASP.NET application. I have a textbox on a webform, and I want to force whatever the user types to upper case. I'd like to do this on the front end. You should also note that there is a validation control on this textbox, so I want to make sure the solution doesn't interfere with the ASP.NET validation.

我正在写一个ASP。网络应用程序。我在webform上有一个文本框，我想将用户输入的内容强制为大写。我想在前端做这个。您还应该注意，这个文本框上有一个验证控件，因此我希望确保解决方案不会影响到ASP。网络验证。

Clarification: It appears that the CSS text transform makes the user input appear in uppercase. However, under the hood, it's still lower case as the validation control fails. You see, my validation control checks to see if a valid state code is entered, however the regular expression I'm using only works with uppercase characters.

说明:CSS文本转换使用户输入以大写显示。但是，在引擎盖下，当验证控制失败时，它仍然是较低的情况。您看，我的验证控件检查是否输入了有效的状态码，但是我使用的正则表达式只对大写字符起作用。

20 个解决方案

#1

Why not use a combination of the CSS and backend? Use:

为什么不结合使用CSS和后端呢?使用:

style='text-transform:uppercase' 

on the TextBox, and in your codebehind use:

在文本框和你的代码后面使用:

Textbox.Value.ToUpper();

You can also easily change your regex on the validator to use lowercase and uppercase letters. That's probably the easier solution than forcing uppercase on them.

您还可以很容易地将验证器上的regex更改为使用小写字母和大写字母。这可能比用大写字母来表示更简单。

#2

Use a CSS style on the text box. Your CSS should be something like this:

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

.uppercase
{
    text-transform: uppercase;
}

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

#3

Okay, after testing, here is a better, cleaner solution.

好的，在测试之后，这里有一个更好、更干净的解决方案。

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

You can intercept the key press events, cancel the lowercase ones, and append their uppercase versions to the input:

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

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

This works in both Firefox and Internet Explorer. You can see it in action here.

这在Firefox和Internet Explorer中都有效。你可以在这里看到它的作用。

#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

 style='text-transform:uppercase'

#8

I just did something similar today. Here is the modified version:

我今天做了一些类似的事情。以下是修改后的版本:

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

Basically, the script attaches an event that fires when the text box loses focus.

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

#9

I would do this using jQuery.

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

You must have the jQuery library in the /script folder.

您必须在/script文件夹中拥有jQuery库。

#10

I have done some analysis about this issue on four popular browser versions.

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

1. the style tag simple displays the characters in uppercase but, the control value still remains as lowercase
2. 样式标签简单地显示大写字符，但是控制值仍然保持小写
3. the keypress functionality using the char code displayed above is a bit worry some as in firefox chrome and safari it disables the feature to Ctrl + V into the control.
4. 使用上面显示的char代码的按键功能有点让人担心，因为firefox chrome和safari浏览器禁用了将该功能按Ctrl + V控制的功能。
5. the other issue with using character level to upper case is also not translating the whole string to upper case.
6. 使用字符级到大写的另一个问题是不能将整个字符串转换为大写。

7. the answer I found is to implement this on keyup in conjunction with the style tag.

   我发现的答案是在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();
       }
   };
   

#11

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

text-transform CSS属性指定如何大写元素的文本。它可以用来使文本以全大写或全小写出现

CssClass

CssClass

WebControl.CssClass Property

WebControl。CssClass财产

you can learn more about it - https://developer.mozilla.org/en/docs/Web/CSS/text-transform

您可以了解更多关于它的信息——https://developer.mozilla.org/en/docs/web/css/text转换

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

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

---

use Style="text-transform: uppercase;" or CssClass="upper"

使用样式="text-transform:大写;"或CssClass="upper"

#12

Set the style on the textbox as text-transform: uppercase?

将文本框上的样式设置为文本转换:大写?

#13

Use the text-transform CSS for the front-end and then use the toUpper method on your string server-side before you validate.

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

#14

CSS could be of help here.

CSS在这里可能有帮助。

style="text-transform: uppercase";"

does this help?

这有帮助吗?

#15

here is a solution that worked for me.

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

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

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

You have to get the JavaScript from http://plugins.jquery.com/files/jquery.bestupper.min.js.txt and there you go.

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

Works like a charm!

就像一个魅力!

#16

I use a simple one inline statement

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

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

If you don't want to use css classes you can just use inline style statement.(This one just visibly make uppercase) :)

如果不想使用css类，可以使用内联样式语句。(这一个显然是大写的):

On Server side use

在服务器端使用

string UCstring = txtName.Text.ToUpper();

#17

I realize it is a bit late, but I couldn't find a good answer that worked with ASP.NET AJAX, so I fixed the code above:

我意识到这有点晚了，但是我找不到一个与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;
    }

Used like so:

使用如下所示:

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

#18

JavaScript has the "toUpperCase()" function of a string.

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

So, something along these lines:

因此，沿着这些思路，

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

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

This is a reusable approach. Any number of textboxes can be done this way w/o naming them. A page wide solution could be achieved by changing the selector in docReady.

这是一种可重用的方法。任何数量的文本框都可以这样命名它们。可以通过在docReady中更改选择器来实现一页宽的解决方案。

My example uses lost focus, the question did not specify as they type. You could trigger on change if thats important in your scenario.

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