Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Nov 2003
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Convert input text to uppercase as user types

    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

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!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.

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Convert input text to uppercase as user types

    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

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by steve78 View Post
    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.
    Last edited by Philip M; 05-08-2009 at 06:39 PM.

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Code:
    <!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>

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    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
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    <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>
    Last edited by Philip M; 05-08-2009 at 05:56 PM.

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Good point. This seems to work:

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

    Didn't notice the date. Did notice he 'borrowed' the code from here, though.

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    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.'

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by adios View Post
    Good point. This seems to work:

    Code:
    <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.

  • #11
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    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()">


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •