PDA

View Full Version : 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>
<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>
<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
<input type=button name="thebutton" [...] onclick="youchangethecolor(form.thecolor.value)">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:


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


function setColour(colour) {var b, s;
if((b = document.body) && (s = b.style)) {s.backgroundColor = colour;}
}
<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:


<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