javascript - ¿Cómo puedo forzar la entrada a mayúsculas en un cuadro de texto ASP.NET?

html textbox

Question

Estoy escribiendo una aplicación ASP.NET. Tengo un cuadro de texto en un formulario web, y quiero forzar lo que el usuario escriba en mayúsculas. Me gustaría hacer esto en el frente. También debe tener en cuenta que hay un control de validación en este cuadro de texto, por lo que quiero asegurarme de que la solución no interfiera con la validación de ASP.NET.

Aclaración: parece que la transformación de texto CSS hace que la entrada del usuario aparezca en mayúsculas. Sin embargo, bajo el capó, todavía está en minúsculas cuando falla el control de validación. Verá, mi control de validación comprueba si se ingresa un código de estado válido, sin embargo, la expresión regular que estoy usando solo funciona con caracteres en mayúscula.

Answer 1

Acabo de hacer algo similar hoy. Aquí está la versión modificada:

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

Básicamente, la secuencia de comandos adjunta un evento que se dispara cuando el cuadro de texto pierde el foco.

Answer 2

Establecer el estilo en el cuadro de texto como texto-transformar: mayúscula ?

Answer 3

Utilice CSS de transformación de texto para el front-end y luego use el método toUpper en su servidor de cadena antes de validar.

Answer 4

 style=''text-transform:uppercase''

Answer 5

CSS podría ser de ayuda aquí.

style="text-transform: uppercase";"

ayuda esto?

Answer 6

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

Answer 7

Me doy cuenta de que es un poco tarde, pero no pude encontrar una buena respuesta que funcionara con ASP.NET AJAX, así que arreglé el código anterior:

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

Usado así:

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

Answer 8

Haría esto usando 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>

Debe tener la biblioteca jQuery en la carpeta /script .

Answer 9

He realizado algunos análisis sobre este tema en cuatro versiones populares de navegadores.

1. la etiqueta de estilo simple muestra los caracteres en mayúscula, pero el valor de control permanece como en minúscula
2. la funcionalidad de pulsación de tecla que utiliza el código de char que se muestra arriba es un poco preocupante, como en Firefox Chrome y safari, deshabilita la función para Ctrl + V en el control.
3. el otro problema con el uso del nivel de caracteres en mayúsculas tampoco es traducir toda la cadena a mayúsculas.

4. la respuesta que encontré es implementar esto en la tecla junto con la etiqueta de estilo.

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

Answer 10

JavaScript tiene la función "toUpperCase ()" de una cadena.

Entonces, algo en esta línea:

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

Answer 11

Puede interceptar los eventos de pulsación de teclas, cancelar los minúsculos y anexar sus versiones en mayúsculas a la entrada:

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

Esto funciona tanto en Firefox como en Internet Explorer. Puedes verlo en acción aquí .

Answer 12

Use un estilo CSS en el cuadro de texto. Tu CSS debería ser algo como esto:

.uppercase
{
text-transform: uppercase;
}
<asp:TextBox ID="TextBox1" runat="server" Text="" CssClass="uppercase"></asp:TextBox>;

Answer 13

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

Answer 14

aquí hay una solución que funcionó para mí.

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

Debe obtener el JavaScript de http://plugins.jquery.com/files/jquery.bestupper.min.js.txt y listo.

¡Funciona de maravilla!

Answer 15

¿Por qué no usar una combinación de CSS y back-end? Utilizar:

style=''text-transform:uppercase'' 

en el TextBox, y en su código de uso posterior:

Textbox.Value.ToUpper();

También puede cambiar fácilmente su expresión regular en el validador para usar letras minúsculas y mayúsculas. Esa es probablemente la solución más fácil que forzar mayúsculas en ellos.

Answer 16

De acuerdo, después de las pruebas, aquí hay una solución mejor y más limpia.

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

Answer 17

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

Answer 18

 $().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);
}

Este es un enfoque reutilizable. Cualquier cantidad de cuadros de texto se puede hacer de esta manera sin nombrarlos. Se puede lograr una solución de ancho de página al cambiar el selector en docReady.

Mi ejemplo utiliza el foco perdido, la pregunta no especificaba mientras escribían. Podría desencadenar un cambio si eso es importante en su escenario.

Answer 19

Yo uso una simple declaración en línea

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

Si no quieres usar las clases de CSS, puedes usar una declaración de estilo en línea. (Esta solo visiblemente mayúscula) :)

En el lado del servidor use

string UCstring = txtName.Text.ToUpper();

Answer 20

La CSS property specifies how to capitalize an element''s text. It can be used to make text appear in all-uppercase or all-lowercase transformación de texto CSS property specifies how to capitalize an element''s text. It can be used to make text appear in all-uppercase or all-lowercase 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

Propiedad WebControl.CssClass

puede obtener más información al respecto: 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;" o CssClass="upper"