pressing enter in <textarea> box

hourang · 07-18-2005, 05:54 PM

hi all, i have a form that has a <textarea> box. when a user presses enter i want it to submit the form instead of breaking to the next line and inserting a cariage return in the form data. i do not have a submit button and instead use a image with javascript link, do i have to use a submit button for this to work? this is probably better put in the javascript section. thanks.

_Aerospace_Eng_ · 07-18-2005, 06:29 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">           
function ifEnter(field,event) {
var theCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if (theCode == 13){
document.forms[0].submit();
return false;
} 
else
return true;
}      
</script>
</head>

<body>
<form>
<textarea cols="10" rows="5" onkeypress="ifEnter(this,event);"></textarea>
<input type="image" src="someimage.jpg">
</form>
</body>
</html>

]|V|[agnus · 07-18-2005, 06:38 PM

This is a JS question (well, and so was the original) but...

Aero, could you explain this line a little more:

Code:

var theCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;

I am familiar with this syntax:

Code:

var someVar = (...some condition to check...) ? valueIfTrue : valueIfFalse;

Your syntax has some extra details I'm not familiar with.

hourang · 07-18-2005, 06:46 PM

Quote:

Originally Posted by _Aerospace_Eng_

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">           
function ifEnter(field,event) {
var theCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if (theCode == 13){
document.forms[0].submit();
return false;
} 
else
return true;
}      
</script>
</head>

<body>
<form>
<textarea cols="10" rows="5" onkeypress="ifEnter(this,event);"></textarea>
<input type="image" src="someimage.jpg">
</form>
</body>
</html>

awesome thats what i need. now what about the shift-enter thing? what would the charcode be for something like that? and what about users with js disabled(not worried about it just curious)?

Grant Palin · 07-18-2005, 06:49 PM

Quote:

Code:

var theCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;

I am familiar with this syntax:

Code:

var someVar = (...some condition to check...) ? valueIfTrue : valueIfFalse;

Your syntax has some extra details I'm not familiar with.

That's a compound statement - it uses two, nested, ternary operators. It's clearer when you add parentheses:

Code:

var theCode = (event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode));

So if the first test (event.keyCode) fails, the second value is used, which is itself the result of another ternary operator. If the second test (event.which) fails, the final value (event.charCode) is used.