Pressing the Enter Key

**Symptom7** · 05-08-2005, 08:14 AM

Can someone Please help me with this?

I am just learning JavaScript. The page I made will let a user type a color name in the text field and the background color will change to that color when the button is clicked. It works fine but, I would also like it to work by pressing the Enter Key. How is that done?
Here is the code for the page. Thank You.

<html>
<head>
<title>I will try this again and again until I get it right.</title>

<script type="text/javascript">
function youchangethecolor(pickit)
{
document.bgColor=pickit
}
</script>

</head>
<body>
<form>
<input type=text name="thecolor">
<input type=button name="thebutton" value="Type a color and click to change to that color" onclick="youchangethecolor(form.thecolor.value)">
</form>
</body>
</html>

**jscheuer1** · 05-08-2005, 09:42 AM

We may hear of a better or more correct way but this works in NS7.2 & IE6:

HTML Code:

<html>
<head>
<title>Works Now</title>

<script type="text/javascript">
function loadcolr(){
var colr=location.href.substr(location.href.lastIndexOf('=')+1)
if (colr!==location.href)
document.bgColor=unescape(colr)
}
</script>

</head>
<body onload=document.forms[0][0].focus();loadcolr()>
<form>
<input type=text name="thecolor">
<input type=button name="thebutton" value="Type a color and click to change to that color" onclick="window.location.replace(location.href.substr(0,location.href.indexOf('?'))+'?thecolor='+escape(form.thecolor.value))">
</form>
</body>
</html>

The bit about focus() was just something I threw in.

**jscheuer1** · 05-08-2005, 08:52 PM

Little did I know when I posted that, I am the one now with a simpler solution:

HTML Code:

<html>
<head>
<title>Works Now</title>
</head>
<body>
<form>
<input type="text" name="thecolor">
<input type="button" name="thebutton" 
value="Type a color and click to change to that color" onClick="submit();">
</form>
<script type="text/javascript">
var colr=location.href.substr(location.href.lastIndexOf('=')+1)
if (colr!==location.href)
document.bgColor=unescape(colr)
document.forms[0][0].focus()
</script>
</body>
</html>

**mwinter** · 05-09-2005, 12:32 PM

Originally Posted by Symptom7

You're rather fortunate that the emphasised part above works. The code currently relies on undefined behaviour that has added the form object to a custom scope chain (used to look up identifiers). In fact, the form object is a property of the input element, to the correct way to access it is:

Code:

<input ... onclick="youchangethecolor(this.form.thecolor.value);">

A small adjustment, but a potentially important one.

Now, as for your question, here's one possible solution:

Code:

function setColour(colour) {var b, s;
  if((b = document.body) && (s = b.style)) {s.backgroundColor = colour;}
}

HTML Code:

<form onsubmit="setColour(this.elements.colour.value); return false;">
<input type="text" name="colour">
<input type="submit" value="Set colour">
</form>

If either Enter is pressed within the text box, or the button is activated, the form is submitted. That event is then captured and cancelled, changing the colour in the process.

You should be aware that whilst this will work, it suffers from the fact that users without client-side scripting support will actually end up submitting a form because the submit event won't be cancelled. So, an alternative could be:

HTML Code:

<script type="text/javascript">
  function setColour() {
    var e = document.getElementById('colour');

    if(e) {document.body.style.backgroundColor = e.value;}
  }

  if(document.body && document.body.style
   && document.getElementById && document.write)
  {
    document.write([
     '<input id="colour" type="text" value=""',
     ' onkeydown="if((13 == event.keyCode) || (13 == event.which)) {setColour();}">',
     '<input type="button" value="Set colour" onclick="setColour();">'
    ].join('\n'));
    if(document.close) {document.close();}
  }
</script>

When included within your markup (at the location where the elements should appear), the code first examines the environment to ensure that what it needs is supported. It then writes the two input elements into the document stream.

The code now uses a combination of a click and keydown event listener to catch activation of the button, and an Enter keystroke, respectively, to change the colour.

Hope that helps,
Mike

Thread: Pressing the Enter Key

Thread Tools

Search Thread

Pressing the Enter Key Same as onclick?

Bookmarks

Bookmarks

Posting Permissions