www.webdeveloper.com
Results 1 to 7 of 7

Thread: Need Javascript Coding Help

  1. #1
    Join Date
    Apr 2010
    Location
    Perry, GA
    Posts
    5

    Need Javascript Coding Help

    I need to:
    Create a cross-browser (works in Firefox and MS IE) web page:
    a. Using anonymous JS methods, create an input field that always converts the user typed value into uppercase when the focus is taken away
    b. Write JavaScript code so that anywhere you in the window, it shows the key you have pressed.
    HINT: Use the event object for detecting the key. HINT: To capture the event use document.onkeypress HINT: Use String.fromCharCode(Keycode) to convert the keycode obtained from the event back to a character.
    I've read a previousattepmt on this and here what I have so far:
    html>
    <head>

    <title>Assignment 4b</title>

    <script type="text/javascript">
    document.onkeypress = function(e)
    {
    var key = (e) ? e.which : event.keyCode;
    document.getElementById('txt').value = key;

    var char;
    char = String.fromCharCode(event.keyCode);
    window.status = "You pressed " + char;
    }
    </script>
    </head>

    <body>
    <center>
    <H1>Cross Browser Script</H1>
    <h3>Wayne Shugars</h3>
    <h5>G00063680</h5>
    <h5>Script 4b</h5>
    </center>
    <form>
    Enter text here: <input type="text" id="txt"
    onblur="this.value=this.value.toUpperCase()">
    </form>
    </body>
    </html>
    That will give the keycode and convert it to uppercase, but it doesn't convert back to normal text.
    I tried this:
    <HTML>
    <HEAD>

    <TITLE>Cross Browser Script</TITLE>

    <script type="text/javascript">
    function upperCase(x)
    {
    var xValue = x.value;
    x.value = xValue.toUpperCase();
    }
    </script>

    </HEAD>
    <BODY>
    <CENTER>
    <H2>Cross Browser Script</H2>
    <h5>Name</h5>
    <h5>063680</h5>
    <h5>Script 4a</h5>
    </Center>

    Enter text here: <input type="text"
    id="sometext" onblur="upperCase(this)">

    </BODY>
    </HTML>
    This will convert what ever normal caracter you type to uppercase when you wove out of focus, but not the keycode.
    This is my first attempt at programming and any help is greatly appreciated.
    Thank you

  2. #2
    Join Date
    Aug 2007
    Posts
    3,767
    Your first attempt is right, but for one thing. You are overwriting the value of the text-box every time a key is pressed. Remove that, and it should work perfectly.
    Code:
    <html>
    <head>
    <title>Assignment 4b</title>
    <script type="text/javascript">
    document.onkeypress = function (e) {
    var key = (e) ? e.which : event.keyCode;
    var char;
    char = String.fromCharCode(event.keyCode);
    window.status = "You pressed " + char;
    }
    </script>
    </head>
    
    <body>
    <center>
    <h1>Cross Browser Script</h1>
    <h3>Wayne Shugars</h3>
    <h5>G00063680</h5>
    <h5>Script 4b</h5>
    </center>
    <form>
    Enter text here: <input type="text" id="txt"
    onblur="this.value=this.value.toUpperCase();">
    </form>
    </body>
    </html>

  3. #3
    Join Date
    Jul 2008
    Location
    Carnoustie, Scotland
    Posts
    36
    Your three 'HINTS' suggest this is a uni/college coursework, lol

  4. #4
    Join Date
    Apr 2010
    Location
    Perry, GA
    Posts
    5

    A little more guidance please

    Quote Originally Posted by Declan1991 View Post
    Your first attempt is right, but for one thing. You are overwriting the value of the text-box every time a key is pressed. Remove that, and it should work perfectly.
    Thank you Declan1991 for you help, but are you saying I should remove the document.onkeypress = function. The request for the assignment was to use it: "HINT: To capture the event use document.onkeypress" or am misunderstanding something. Take in mind that I am very new at doing this, like little over 1 week. Therefore little words and cartoons will help alot. Only kidding, but very simple directions will be very helpful. Thank you.
    Last edited by Declan1991; 04-10-2010 at 09:19 PM. Reason: Complete quote

  5. #5
    Join Date
    Aug 2007
    Posts
    3,767
    No, merely suggesting (well actually I'm guessing what you want) that you remove this line as I did in my example.
    Code:
    document.getElementById('txt').value = key;
    The rest is exactly the same as your code was.

    ADDITION: Actually, I just spotted something that will stop it working in IE. You (or someone else ) went to the hassle of defining key, which contains a number corresponding to the key pressed. You window.status should use that, not event.keyCode. So the fully working code is below. It's basically what you had, with just a few minor alterations.
    Code:
    <html>
    <head>
    <title>Assignment 4b</title>
    <script type="text/javascript">
    window.onkeypress = function (e) {
    var key = (e) ? e.which : event.keyCode;
    var char = String.fromCharCode(key); // NOTE: Use the variable key, NOT event.keyCode
    window.status = "You pressed " + char;
    }
    </script>
    </head>
    
    <body>
    <center>
    <h1>Cross Browser Script</h1>
    <h3>Wayne Shugars</h3>
    <h5>G00063680</h5>
    <h5>Script 4b</h5>
    </center>
    <form>
    Enter text here: <input type="text" id="txt"
    onblur="this.value=this.value.toUpperCase();">
    </form>
    </body>
    </html>

  6. #6
    Join Date
    Apr 2010
    Location
    Perry, GA
    Posts
    5

    Thumbs up Thank you Declan1991

    Thank you, I will give it a shot and thanks again. I will probably will need your skills again, take care

  7. #7
    Join Date
    Apr 2010
    Location
    Perry, GA
    Posts
    5

    Unhappy Declan1991: Perhaps I Misunderstand the Assignment

    Is the assignment:
    Create a cross-browser (works in Firefox and MS IE) web page:
    a. Using anonymous JS methods, create an input field that always converts the user typed value into uppercase when the focus is taken away
    b. Write JavaScript code so that anywhere you in the window, it shows the key you have pressed.
    HINT: Use the event object for detecting the key. HINT: To capture the event use document.onkeypress HINT: Use String.fromCharCode(Keycode) to convert the keycode obtained from the event back to a character.

    Asking two script or is one script that does both.
    The code that was last:
    <html>
    <head>
    <title>Assignment 4b</title>
    <script type="text/javascript">
    window.onkeypress = function (e) {
    var key = (e) ? e.which : event.keyCode;
    var char = String.fromCharCode(key); // NOTE: Use the variable key, NOT event.keyCode
    window.status = "You pressed " + char;
    }
    </script>
    </head>

    <body>
    <center>
    <h1>Cross Browser Script</h1>
    <h3>Wayne Shugars</h3>
    <h5>G00063680</h5>
    <h5>Script 4b</h5>
    </center>
    <form>
    Enter text here: <input type="text" id="txt"
    onblur="this.value=this.value.toUpperCase();">
    </form>
    </body>
    </html>
    Definitely complied with the first part:
    "Using anonymous JS methods, create an input field that always converts the user typed value into uppercase when the focus is taken away," but doesn't seem to answer the second request:
    Write JavaScript code so that anywhere you (type) in the window, it shows the key you have pressed.
    In which I tried:
    <html>
    <head>
    <title>Keycode Identifier</title>

    <script type="text/javascript">
    document.onkeypress = function(e)
    {
    var key = (e) ? e.which : event.keyCode;//set varible for the keycode
    document.getElementById('txt').value = key;//Get the information from typed key

    var char;//set varible for the character
    char = String.fromCharCode(event.keyCode);//convert the keycode back to the character
    window.status = "You pressed " + char;//Displays the converted keycode in the window status
    }
    </script>
    </head>

    <body>
    <center>
    <h2>Cross Browser Script</h2>
    <h3>Wayne Shugars</h3>
    <h5>G00063680</h5>
    <h5>Script 4b</h5>
    </center>
    <form>
    Keycode for key you pressed: <input type="text" id="txt"
    onblur="this.value=this.value.toUpperCase()">
    <h5>The Key Press is on bottom of screen</h5>
    </form>
    </body>
    </html>
    Which gives the keycode and convert it to the actual character and goes to uppercase when the focus is removed, but is it--what the assignment is? and is it cross browser capatible. I sorry if I seem dense, but I feel like I am talking in another language and I can't speak the language.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles