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 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2008
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts

    JavaScript change individual characters to upper case

    Hi.

    I want to type into a HTML text box so that after each character is entered, a JavaScript function will raise the character to upper case and after doing so the cursor position will remain after the character entered ready for the next character, if that makes sense, just the same as typing say into a Word document, but each time a letter is entered it is immediately upper cased. Problem with my code is that after the .toUpperCase() method the cursor leapes over to the end of the line, which is unsatisfactory. I don't want to use the onblur event to do the job instead the change needs to be dynamic as I type. For example text contains "FRED SMITH", I want to the position cursor in the space and enter in a middle name, which may be typed in lowercase, but end up with: "FRED MICHAEL SMITH". Any ideas please?


    <html></head>
    <body>
    <input id='txt1' value='FRED SMITH' onkeyup='txt1_onkeyup()'>
    </body>
    </html>
    <script language='javascript'>
    function txt1_onkeyup()
    {
    if(
    event.keyCode == 35 ||
    event.keyCode == 36 ||
    event.keyCode == 37 ||
    event.keyCode == 39
    ) // ignore cursor keys.
    {return;}
    else
    {
    if (event.keyCode != 8)
    {
    var o=document.all;
    o.txt1.value = o.txt1.value.toUpperCase();
    }
    }
    }
    </script>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    How about applying a style of text-transform: uppercase; to your input element?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,031
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    Code:
    Enter your first name: <input type="text" id="firstname" style="text-transform:uppercase"><br>
    Enter your family name: <input type="text" id="familyname" style="text-transform:uppercase"><br>
    Enter your dog's name: <input type="text" id="dogsname" style="text-transform:uppercase">

    Instructions on a Swedish chainsaw -- "Do not attempt to stop chain with your hands or genitals."
    Last edited by Philip M; 08-15-2008 at 12:24 PM. Reason: abduraooft has the better and simpler solution!


  •  

    Posting Permissions

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