问题
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.
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.
回答1:
Why not use a combination of the CSS and backend? Use:
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.
回答2:
Use a CSS style on the text box. Your CSS should be something like this:
.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.
回答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.
<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.
回答10:
I have done some analysis about this issue on four popular browser versions.
- the style tag simple displays the characters in uppercase but, the control value still remains as lowercase
- 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.
- the other issue with using character level to upper case is also not translating the whole string to upper case.
the answer I found is to implement this on keyup in conjunction with the style tag.
<-- 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
CssClass
WebControl.CssClass Property
you can learn more about it - 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
use Style="text-transform: uppercase;" or 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.
回答14:
CSS could be of help here.
style="text-transform: uppercase";"
does this help?
回答15:
here is a solution that worked for me.
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.
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) :)
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:
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.
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.
My example uses lost focus, the question did not specify as they type. You could trigger on change if thats important in your scenario.
来源：https://stackoverflow.com/questions/202368/how-can-i-force-input-to-uppercase-in-an-asp-net-textbox