Executing JavaScript on Key Press

Question

I'm doing some very rudimentary javascript work and seem to hit a bump. For the life of me, I can't seem to find what should be a very basic answer on Google.

<html>
    <head>
        <title>Test Page</title>
        <script type="text/javascript">
    function lowerCase(){
        var input = document.send.inputText;
        input.toLowerCase();
        document.write(input);
        alert(input);
    }
    </script>
    </head>
    <body>
        <h1>Test Page</h1>
        <form name="send">
            <input type='text' name="inputText" onkeypress="lowerCase()"/>
        </form>
    </body>
</html>

My intent is that the function lowerCase is executed on entering information into the textbox and pressing enter. However, I can never seem to get the function to execute.

@iambriansreed - you mean jsfiddle.

Derek 朕會功夫
– Derek 朕會功夫

2012-05-10 03:34:01 +00:00
Commented May 10, 2012 at 3:34 — Derek 朕會功夫
– Derek 朕會功夫, Commented May 10, 2012 at 3:34

Šime Vidas · Accepted Answer · 2012-05-10 02:19:44Z

3

How about...

HTML:

<input type='text' name="inputText" onkeypress="lowerCase(this)">

JavaScript:

function lowerCase ( input ) {
    setTimeout( function () {
        input.value = input.value.toLowerCase();    
    }, 0 );    
}

Live demo: http://jsfiddle.net/vXpj8/3/

function lowerCase ( e ) {
    if ( e.keyCode === 13 ) {
        this.value = this.value.toLowerCase();
        e.preventDefault();
    }        
}

document.send.inputText.onkeypress = lowerCase;

Live demo: http://jsfiddle.net/vXpj8/1/

Notice, how I bind the event handler with JavaScript. I do this because I want to have the event object available in the function.

edited May 10, 2012 at 2:19

answered May 10, 2012 at 2:12

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Astephen2 Over a year ago

For realtime, that works absolutely perfectly. All I'm looking for however is a box that I can type something into, press enter, and then have it show the lowercase equivalent.

Derek 朕會功夫 Over a year ago

@ŠimeVidas Should you clear out the timeout when keyup? Since it will consume a numbers of memory.

Šime Vidas Over a year ago

@Derek What do you mean? I always want to execute the timeout function, regardless of the keyup event.

Peter Bratton · Accepted Answer · 2012-05-10 02:11:01Z

0

There's a space between the onkeypress attribute and equals sign. Remove that; it should work.

answered May 10, 2012 at 2:11

Peter Bratton

6,4076 gold badges42 silver badges62 bronze badges

1 Comment

Astephen2 Over a year ago

Thanks for the advice! I tried it and it doesn't seem to work.

iambriansreed · Accepted Answer · 2012-05-10 02:41:07Z

0

Fiddle: http://jsfiddle.net/iambriansreed/jEnxH/

<form name="send">
    <input type='text' name="inputText">
</form>
<script>
    document.send.inputText.onkeypress = function(event){
        if(event.keyCode != 13) return;       
        this.value = this.value.toLowerCase();
        alert(this.value.toLowerCase());
        event.preventDefault();
    };
</script>

edited May 10, 2012 at 2:41

answered May 10, 2012 at 2:35

iambriansreed

22.3k6 gold badges66 silver badges81 bronze badges

Comments

RobG · Accepted Answer · 2012-05-10 03:04:55Z

0

If you want it to work when the enter key is pressed, then you'll need to deal with the form being submitted, since pressing enter in a text input element that is a form control submits the form.

More likely you want to change the value to lower case on some other event, such as keup, e.g.

 <input onkeyup="this.value = this.value.toLowerCase();" ... >

Doing this sort of thing is a bit annoying for users though, since upper case letters are magically changed to lower case. If there is a back-end requirement for lower case letters, better to deal with it there than confuse users entering text.

answered May 10, 2012 at 3:04

RobG

148k32 gold badges180 silver badges216 bronze badges

Comments

Charlie Wu · Accepted Answer · 2012-05-10 02:19:28Z

-1

a few issues with your code first var input is a input box not the string, toLowerCase() is a string method, you need input value

var input = document.send.inputText;
alert(input.value);

second, onkeypress is excuted before text is entered, maybe you should consider change onkeypress to onkeyup

try if this helps

<html>
<head>
    <title>Test Page</title>
    <script type="text/javascript">
        function lowerCase(){
            var input = document.send.inputText;
            input.value = input.value.toLowerCase();
        }
    </script>
</head>

<body>

    <h1>Test Page</h1>
    <form name="send">
        <input type='text' name="inputText" onkeyup="lowerCase()">
    </form>

</body>
</html>

answered May 10, 2012 at 2:19

Charlie Wu

7,7875 gold badges35 silver badges40 bronze badges

Collectives™ on Stack Overflow

Executing JavaScript on Key Press

5 Answers 5

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related