Capture ENTER in input field

T

Tom de Neef

I have a form with a text field and a button and a simple script:
<script type=text/javascript>
function action()
{
document.getElementById("result").innerHTML =
someProcess(document.form.input.value)
}
</script>
<form name="form">
<input type="text" name="input" value="">
<input type=button value="Go" onclick=action()>
</form>
<p id="result">&nbsp;</p>

It does what it should do: display the results of some process, acting on
the value of the text field, when the button is clicked.

My question: is it possible to and add an event handler that is triggered
when the user completes his input with an Enter key hit (and maybe scrap the
button) ? Like onenterkeydetected=action().

Thanks,
Tom
 
T

Tom de Neef

I have found that onsubmit should be attached to the form.
Can anyone explain why the page is reloaded after you input some string
followed by an enter key?

<html>
<head>
<script type=text/javascript>
function act(txt)
{
document.getElementById("result").innerHTML = txt
}
</script>
</head>

<body onload=alert('loading')>
<form name="form" onsubmit=act(this.input.value)>
<input type="text" name="input">
<input type="button" name="go" value="Go" onclick=act(input.value)>
</form>
<p id="result">result</p>
</body>
</html>

Enter "test" and click the button. "result" will be replaced by "test".
Enter "test" followed by enter key. Same thing happens (which you can't see)
and then the page is reloaded...!
Tom
 
T

Thomas 'PointedEars' Lahn

T

Tom de Neef

Thomas 'PointedEars' Lahn said:
Your markup is invalid and you don't return a value to the `onsubmit'
event
handler.
Click to expand...

Thanks for the feedback, sorry for the trouble. I will improve my posts.
Back to my original problem. I would like to execute the act function when
the input is terminated with an enter, rather than having to click the
button. (And the form should not submit - the form is there only to allow a
text field.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>test</title>
<script type="text/javascript">
function act(txt)
{
document.getElementById("result").innerHTML = txt
return false // ??
}
</script>
</head>

<body>
<form action="">
<input type="text" name="input">
<input type="button" name="go" value="Go" onclick="act(input.value)">
</form>
<p id="result">result</p>
</body>
</html>
 
T

Thomas 'PointedEars' Lahn

Tom said:
Thanks for the feedback, sorry for the trouble. I will improve my posts.
Click to expand...

It was rather meant as a hint towards the cause of your "original" problem.
Scripts based on invalid code are not likely to execute properly.
Back to my original problem. I would like to execute the act function when
the input is terminated with an enter, rather than having to click the
button. (And the form should not submit - the form is there only to allow a
text field.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Click to expand...

This triggers Standards Compliance Mode for Gecko, and Compatibility Mode
in IE 6 (see <http://quirksmode.org/css/quirksmode.html> pp.) You should
prefer:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://w3.org/TR/html4/loose.dtd">

Or, even better, HTML 4.01 Strict.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
http://www.w3.org/QA/Tips/good-titles

<script type="text/javascript">
function act(txt)
{
document.getElementById("result").innerHTML = txt
Click to expand...

Very bad style. D::gEBI() is a standardized method, `innerHTML' is a
proprietary feature. Never use those two together without sufficient
feature tests, and avoid such reference worms in general. That said, try to
avoid the error-prone `innerHTML' property; use document tree modification
methods instead.
return false // ??
Correct.

}
</script>
</head>

<body>
<form action="">
<input type="text" name="input">
<input type="button" name="go" value="Go" onclick="act(input.value)">
Click to expand...

There is where you don't return the returned value to the *event handler*.

<input type="button" name="go" value="Go"
onclick="return act(this.form.elements['input'].value);">

However, you are looking for

<input name="input" onkeypress="return ..." onkeyup="return ...">

The general button is not a submit button and therefore has nothing to do
with the other `input' element.

So you would probably be best off using a submit button instead:

<form action="" onsubmit="return act(...);">

<input name="..."
onkeypress="if (typeof event != 'undefined') handleKeypress(event)"
onkeyup="if (typeof event != 'undefined') handleKeypress(event)">

<input type="submit" value="Go">

</form>


HTH

PointedEars
 
T

Tom de Neef

Thomas 'PointedEars' Lahn said:
This triggers Standards Compliance Mode for Gecko, and Compatibility Mode
in IE 6 (see <http://quirksmode.org/css/quirksmode.html> pp.) You should
prefer:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://w3.org/TR/html4/loose.dtd">

Or, even better, HTML 4.01 Strict.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://w3.org/TR/html4/strict.dtd">
Click to expand...

I will go thru all my files and see what needs to be changed to make them
valid 'strict' docs.
Very bad style. D::gEBI() is a standardized method, `innerHTML' is a
proprietary feature. Never use those two together without sufficient
feature tests, and avoid such reference worms in general. That said, try
to
avoid the error-prone `innerHTML' property; use document tree modification
methods instead.
Click to expand...

I have tried
function act(txt)
{
var para = document.getElementById("result")
para.removeChild(para.firstChild)
para.appendChild(document.createTextNode(txt))
return false
}
But the txt parameter will be filled from many places with 'highlighted'
text (i.e. text containing <B>, <BR> and <FONT> tags. These tags are not
parsed in this way. If I parse them to split the text and create new nodes
for these tags, am I not doing what I expect innerHTML to do?

So you would probably be best off using a submit button instead:

<form action="" onsubmit="return act(...);">

<input name="..."
onkeypress="if (typeof event != 'undefined') handleKeypress(event)"
onkeyup="if (typeof event != 'undefined') handleKeypress(event)">

<input type="submit" value="Go">

</form>
Click to expand...

This helped a lot! The solution is in the submit button.
<form action="" onsubmit="return act(this.input.value)">
<div>
<input type="text" name="input" >
<input type="submit" value="Go">
</div>
</form>
This will call the onsubmit handler when the button is pressed and also when
the string is terminated by an Enter.
Thank you very much.
Tom
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Reversing output of user input by using while loop... 2
Set value after clicking in field 11
Make an <input type="text"> input-ready for input 8
"input-group-text" help 7
[HELP] Add-on - Twitch chat input 0
Hey can anyone tell me why input data wont save in my database? 0
How to treat an input data as variable? 4
How can I remove the specific error message after regex validation is done? 1

Members online

Total: 131 (members: 1, guests: 130)
Robots: 57

Forum statistics

Threads
473,880
Messages
2,569,944
Members
46,251
Latest member
AnnetteBir

Latest Threads

Top