...

View Full Version : Convert input text to uppercase as user types



cclark01
11-10-2004, 06:15 PM
This should be simple, but I can't quite get it to work without some kind of side-effect. I've checked the forum and there doesn't seem to be anything that directly relates. What I want to do is convert the text that a user is typing to uppercase as they type it. What I have so far:

function convertToUppercase(aControl)
{
var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;";

if (cursorKeys.indexOf(event.keyCode+";") == -1) {
aControl.value = aControl.value.toUpperCase();
}
}

<input onkeyup="convertToUppercase(this)"/>


The problem that I have is that this moves the cursor to the end of the line after every character. If you want to go and add something to the middle of what you've typed, you can type one character and then the cursor jumps to the end.

e.g. inserting "abc" between the "R" and "E" of "FRED" gets you: FRAEDBC

What I need is either:
1) ability to get the cursor/caret position and restore it after I set the uppercase string
-- or --
2) ability to intercept the keystroke in the event and make it uppercase before the browser adds it naturally to the input's value.

Solution should be browser-independent (if at all possible). I'm mostly interested in IE though.

Thanks,
Chris

hemebond
11-10-2004, 09:15 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>47298</title>
</head>
<body>
<form>
<fieldset>
<input id="txt" type="text">
</fieldset>
</form>
</body>
<script type="text/javascript">
document.getElementById("txt").addEventListener("keyup",change_case,true);

function change_case(e)
{
var obj = e.currentTarget;
var sel = obj.selectionStart;

obj.value = obj.value.toUpperCase();
obj.setSelectionRange(sel,sel);
}
</script>
</html>Internet Explorer doesn't seem to support setSelectionRange or selectionStart.

steve78
05-08-2009, 02:06 PM
Hello,
This code should work.
<script>
function changeToUpperCase()
{
key = window.event.keyCode;
if ((key > 0×60) && (key < 0x7B))
window.event.keyCode = key-0×20;
}
</script>

Add onKeypress=”changeToUpperCase();” in the form field

Regards,
Steve
http://www.gulfesolutions.com

Philip M
05-08-2009, 05:18 PM
Hello,
This code should work.

<script>
function changeToUpperCase()
{
key = window.event.keyCode;
if ((key > 0x60) && (key < 0x7B))
window.event.keyCode = key-0x20;
}
</script>

Add onKeypress=”changeToUpperCase();” in the form field

Regards,
Steve
http://www.gulfesolutions.com


Only works in IE, when errors corrected.


"We dispense with accuracy". - Sign in pharmacy shop.

adios
05-08-2009, 06:04 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>untitled</title>

<style type="text/css">

input.uppercase {
text-transform: uppercase;
}

</style>
</head>
<body>
<input type="text" class="uppercase" />
</body>
</html>

abduraooft
05-08-2009, 06:28 PM
input.uppercase {
text-transform: uppercase;
}
text-transform won't really change those characters, but just display as changed. So when we use(at client/server side), we will get them as typed.

PS: 6 year old thread :)

Philip M
05-08-2009, 06:42 PM
<html>
<head>
<style type="text/css">
input.uppercase {
text-transform: uppercase;
}
</style>
</head>
<body>

<input type="text" id = "txt1" class="uppercase" />
<input type = "submit" value = "Submit" onclick = "changeItPermanently()">

<script type = "text/javascript">
function changeItPermanently() {
var x = document.getElementById("txt1").value.toUpperCase();
document.getElementById("txt1").value = x;
alert (document.getElementById("txt1").value);
}
</script>
</body>
</html>

adios
05-08-2009, 06:49 PM
Good point. This seems to work:


<input type="text" name="realbig" style="text-transform:uppercase;" onkeyup="this.value=this.value.toUpperCase()">

From DevX (http://www.devx.com/tips/Tip/33409).

Didn't notice the date. Did notice he 'borrowed' the code from here (http://www.liewcf.com/blog/archives/2004/04/javascript-convert-characters-to-uppercase-when-typing/), though.

adios
05-08-2009, 07:05 PM
Philip - nice! No idea why that works.

Better to call that routine from the onsubmit handler, as the conversion will take place even if they submit with 'enter.'

Philip M
05-08-2009, 07:56 PM
Good point. This seems to work:


<input type="text" name="realbig" style="text-transform:uppercase;" onkeyup="this.value=this.value.toUpperCase()">




This retains the original problem, in that multiple characters cannot be inserted in the string as the cursor jumps to the end. My solution only changes the "real" as opposed to the displayed text onsubmit - after all insertions must have taken place. In other words, this.value.toUpperCase() is called only once, at the end of data input.

isaac
11-02-2010, 02:29 AM
This retains the original problem, in that multiple characters cannot be inserted in the string as the cursor jumps to the end. My solution only changes the "real" as opposed to the displayed text onsubmit - after all insertions must have taken place. In other words, this.value.toUpperCase() is called only once, at the end of data input.

by switching onkeyup to onblur we solve the cursor problem that keeps jumping to the end of the text if we want to modify the text after the fact, cause it only executes the toUpperCase() after we finish typing and exit the field.

<input type="text" name="realbig" style="text-transform:uppercase;" onblur="this.value=this.value.toUpperCase()">



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum