I would like to write the keys to be capitalized, taking into account that it can be done with any input of the form, that is, that the formula is general.
I have the following:
function mayus(e) {
var tecla=e.value;
var tecla2=tecla.toUpperCase();
alert(tecla2);
}<input type="text" onkeypress="mayus(this);"> Instead of using onKeyPress , I recommend that you use onKeyUp , it works, when you stop pressing the key.
So the only thing we do is, using the function toUpperCase() we will convert the whole chain in general, and give the effect that is done one by one, since in each event of onKeyUp() the function will be executed.
In other words, it is not necessary to convert capital letters letter by letter.
Likewise, you can replicate the function in other <input type='text'> and it will work the same, so there is no problem in that it is general.
function mayus(e) {
e.value = e.value.toUpperCase();
}<input type="text" onkeyup="mayus(this);">
<input type="text" onkeyup="mayus(this);">Another way to solve it would be like this:
When creating the <input type='text'> , you assign a id to each, and later you can apply this formula.
<input type="text" id="campo" onKeyUp="document.getElementById(this.id).value=document.getElementById(this.id).value.toUpperCase()"> With jQuery you can capitalize the text of any <input> or <textarea> , try the following code by inserting it in the header ( <head> ) of the document:
<script>
$(document).ready( function () {
$("input").on("keypress", function () {
$input=$(this);
setTimeout(function () {
$input.val($input.val().toUpperCase());
},50);
})
})
</script>
You can also use CSS to indicate that <input> or <textarea> you want to convert to Uppercase:
$(document).ready( function () {
$(".UpperCase").on("keypress", function () {
$input=$(this);
setTimeout(function () {
$input.val($input.val().toUpperCase());
},50);
})
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<h1>Datos de Contacto</h1>
<pre>
codigo <input name="codigo">
nombre <input name="nombre" class="UpperCase">
dirección <input name="direccion">
teléfono <input name="telefono">
cargo <input name="cargo" class="UpperCase">
</pre>
<form>I had the same problem. However I have a development using WebForms in ASP.Net.
To complicate things I am using the DevExpress controls. And since their "inputs" (or TextBoxes) are made based on tables, I had to do it this way:
function convierteTextoAMayusculas(s, e) {
s.inputElement.value = s.inputElement.value.toUpperCase();
}I decided to do it that way because I have that function in a separate javascript document, since I plan to reuse it in other areas of the document and in other documents. In fact, I would recommend continuing with the pattern suggested by the same DevExpress controls so that everything is clearer, as in the following:
<dx:ASPxTextBox ID="xtxtMiTextBox" runat="server" Width="170px">
<ClientSideEvents KeyUp="function(s, e) { convierteTextoAMayusculas(s, e); }" />
</dx:ASPxTextBox>
In this way we can notice that we get the reference to the control that invokes the event in its source (s) argument to work with it.
Thank you very much for the previous answers, they were very useful.
Greetings to all.
<p>Usted esta escribiendo esto: <span id="lblOrden"></span></p>
<input type="text" class="form-control" name="norden" id="ordenName">
$('#ordenName').keyup(function(){
var datos = new String($('#ordenName').val());
datos = datos.toUpperCase(datos);
$('#lblOrden').html(datos);
$('#ordenName').val(datos);
})
This one I use and it works for me without problems