Change uppercase input

Question

JS:

<script type="text/css"> $(function() { $('#upper').keyup(function() { this.value = this.value.toUpperCase(); }); }); </script> 

HTML

 <div id="search"> <input type="radio" name="table" class="table" value="professor" tabindex="1" /> Professor <input type="radio" name="table" class="table" value="department" tabindex="2" /> Department <input type="radio" name="table" id="upper" class="table" value="course" tabindex="3" /> Course <input type="text" name="search" class="keywords" value="Select an option..." onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?':this.value;" tabindex="4" /> <div id="content"> </div> </div> 

Why is this still not working? Just trying to call div ".keywords" from JS.

Answer 1

I think the most elegant way is without javascript, but with css. You can use text-transform: uppercase (this is just for idea):

 <input id="yourid" style="text-transform: uppercase" type="text" /> 

Edit:

So, in your case, if you want the keywords to be capitalized: keywords: $(".keywords").val(), up to $(".keywords").val().toUpperCase(),

Answer 2

Javascript string objects have a toLocaleUpperCase() function that simplifies the conversion.

Here is an example of live capitalization:

 $(function() { $('input').keyup(function() { this.value = this.value.toLocaleUpperCase(); }); }); 

---

Unfortunately, this completely discards the contents of the text field, so the user carriage position (if not the "end of the text field") is lost.

You can hack this back into , though, using the browser switching magic:

 // Thanks http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/ function getCaretPosition(ctrl) { var CaretPos = 0; // IE Support if (document.selection) { ctrl.focus(); var Sel = document.selection.createRange(); Sel.moveStart('character', -ctrl.value.length); CaretPos = Sel.text.length; } // Firefox support else if (ctrl.selectionStart || ctrl.selectionStart == '0') { CaretPos = ctrl.selectionStart; } return CaretPos; } function setCaretPosition(ctrl, pos) { if (ctrl.setSelectionRange) { ctrl.focus(); ctrl.setSelectionRange(pos,pos); } else if (ctrl.createTextRange) { var range = ctrl.createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } } // The real work $(function() { $('input').keyup(function() { // Remember original caret position var caretPosition = getCaretPosition(this); // Uppercase-ize contents this.value = this.value.toLocaleUpperCase(); // Reset caret position // (we ignore selection length, as typing deselects anyway) setCaretPosition(this, caretPosition); }); }); 

---

Ultimately, this may be the easiest to fake. Define the text-transform: uppercase style in the text box so that it appears in uppercase for the user, and then apply text conversion in your Javascript once, when the user focus completely leaves the text box:

HTML:

 <input type="text" name="keywords" class="uppercase" /> 

CSS

 input.uppercase { text-transform: uppercase; } 

JavaScript:

 $(function() { $('input').focusout(function() { // Uppercase-ize contents this.value = this.value.toLocaleUpperCase(); }); }); 

Hope this helps.

Answer 3

You can also do this, but other methods seem better, it will come in handy if you need only once.

 onkeyup="this.value = this.value.toUpperCase();" 

Answer 4

to try:

 $('#search input.keywords').bind('change', function(){ //this.value.toUpperCase(); //EDIT: As Mike Samuel suggested, this will be more appropriate for the job this.value = this.value.toLocaleUpperCase(); } ); 

Answer 5

If you intend to input html , you can easily do this without using javascript. This would be a standard and very easy to use modern CSS tag:

 <input type="text" style="text-transform: uppercase" > 

or you can use the bootstrap class named "text-uppercase"

 <input type="text" class="text-uppercase" > 

Answer 6

Solutions using value.toUpperCase seem to have a problem in that entering text in a field resets the cursor position to the end of the text. Text conversion solutions seem to have the problem that the text presented on the server is still potentially lowercase. This solution avoids these problems:

 function handleInput(e) { var ss = e.target.selectionStart; var se = e.target.selectionEnd; e.target.value = e.target.value.toUpperCase(); e.target.selectionStart = ss; e.target.selectionEnd = se; } 

 <input type="text" id="txtTest" oninput="handleInput(event)" /> 

Answer 7

I could not find the uppercase text in Bootstrap mentioned in one of the answers. No matter, I created it;

 .text-uppercase { text-transform: uppercase; } 

Displays uppercase text, but the underlying data is not converted in this way. So in jquery I have:

 $(".text-uppercase").keyup(function () { this.value = this.value.toLocaleUpperCase(); }); 

This will change the underlying data wherever you use the text-uppercase class.

Answer 8

 onBlur="javascript:{this.value = this.value.toUpperCase(); } 

easily change the capital letter.

Demo here

Answer 9

This answer has a problem:

 style="text-transform: uppercase" 

it also converts the placeholder word to uppercase, which is inconvenient

 placeholder="first name" 

when rendering the input, the placeholder "name" is written in uppercase

 FIRST NAME 

so I wrote something better:

 onkeypress="this.value = this.value + event.key.toUpperCase(); return false;" 

this works well! but it has some side effects if your JavaScript code is complex,

hope this helps someone give him / her an idea to develop a better solution.

Answer 10

Javascript has a toUpperCase() method. http://www.w3schools.com/jsref/jsref_toUpperCase.asp

So wherever you think it’s best to put it in your code, you will need to do something like

 $(".keywords").val().toUpperCase() 

Answer 11

 **JAVA SCRIPT** <html> <body> <script> function @ToCaps(obj) { obj.value=obj.value.toUpperCase(); } </script> <input type="text" onkeyup=@ToCaps(this)"/> </body> </html> **ASP.NET** Use a css style on the text box, write css like this: 

.ToCaps {text-transform: uppercase; }

 <asp:TextBox ID="TextBox1" runat="server" CssClass="ToCaps"></asp:Te writxtBox> **OR** simply write this code in textbox <asp:TextBox ID="TextBox1" runat="server" style="text-transform:uppercase"></asp:TextBox> **1.Note you don't get intelligence until you type up to style="** 

Answer 12

You can try this html

 <input id="pan" onkeyup="inUpper()" /> 

Java script

 function _( x ) { return document.getElementById( x ); } // convert text in upper case function inUpper() { _('pan').value = _('pan').value.toUpperCase(); } 

Answer 13

 <input id="name" data-upper type="text"/> <input id="middle" data-upper type="text"/> <input id="sur" data-upper type="text"/> 

Top text on a dynamically created element that has the top attribute, and when the keyup action occurs

 $(document.body).on('keyup', '[data-upper]', function toUpper() { this.value = this.value.toUpperCase(); }); 

Answer 14

Here we use the onkeyup event in the input field, which fires when the user releases the key. And here we change our value to uppercase using the toUpperCase () function.

Note that text-transform = "Uppercase" will only change the text in style. but not that meaning. So, to change the value, use this built-in code that will display as well as change the value

<input id="test-input" type="" name="" onkeyup="this.value = this.value.toUpperCase();">

Here is a code snippet that confirmed the meaning of the change

 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <form method="get" action=""> <input id="test-input" type="" name="" onkeyup="this.value = this.value.toUpperCase();"> <input type="button" name="" value="Submit" onclick="checking()"> </form> <script type="text/javascript"> function checking(argument) { // body... var x = document.getElementById("test-input").value alert(x); } </script> </body> </html>