I need to have an input box in a div without a form and when the user enters something and hits return, it should run a Javascript function.
There will be no submit button.
How can I do this?
To get an input box without a form, I would suggest just not using a form.
You will have to attach a onkeypress event and check if enter was pressed (and rune the code if it was). Tell us if you are using plain JavaScript or some library if you need examples.
It can be simply done with the help of a form as follow... i think adding form would provide great stability
<form onSubmit='alerttest(this); return false'>
<input type="text">
</form>
<script language="javascript">
function alerttest() {
alert("Executing jolly.exe !!!!");
}
</script>
Don't use the form tag. You can easily use JQuery to tie the code to the input control's key press events.
If you are unfamiliar with JQuery, just tie the code directly to the input field key press event.
To run a function when the user presses enter when focused on the input field, the easiest way would be to have the form tag and run the function using the form's onSubmit event (because pressing return when focused on an input field submits the form).
If you nevertheless don't want to include the form tag, you can use the onKeyPress event to catch the return key pressing and call the function from there.
Related
I have an input tag within a form, when I press enter in the input box. The url will be appended with a question mark.
code:
<form>
<input id="xyz" type="text" value="">
</form>
This is very annoying, so I add some code to prevent the user from doing this behaviour. I change the body tag to:
<body onkeydown="(event.keyCode==13) ? 0 : 1">
Well, this works in another webpage, but not in this case.
What have I missed?
And is this a good solution to prevent user from pressing enter on the keyboard?
Please give some explanation in your answer, thanks.
p.s. I can't use jQuery.
UPDATE: I don't want the user to enter press on their keyboard to submit a form even I define the form action and method.
The default action when you press enter while in an input is to submit the form. Since you don't have any action defined for the form, it doesn't do anything. You also don't have a method defined so I believe it defaults to GET which uses parameters in the URL (like example.com?param1=abc¶m2=123).
If you change <form> to <form method="post">that should stop the question mark from appearing. Though it's still not valid HTML because you don't have an action or a name for your form.
May I ask why you don't want them submitting the form when they press enter?
I'm using WordPress Liveblog:
https://github.com/Automattic/liveblog
My aim is to let the user submit a form without the need to click submit. Instead, I'd like the form to be submitted using the enter key.
My form can be seen here:
https://github.com/Automattic/liveblog/blob/master/templates/liveblog-form.php
You will see the form doesn't have a form tag. Instead the form input is contained within script tags. So, I can't use the jQuery submit method e.g. $('#formID').submit();
I think backbone.js is used? I'm unfamiliar with how backbone.js works.
How can I let users submit this particular form by pressing the enter key?
This answer did the job. The snippet:
$('input').keyup(function(e){
if(e.keyCode == 13){
$(this).trigger('enter');
}
});
Please note: I do not want to use jQuery for this (otherwise I like it)
Problem: I have come to situation where I need to do some javascript function after an user changes an input field (e.g. input type="text"). So I said to myself - I remember an onchange event - BUT onchange event runs AFTER user leaves the field, but I need the function to be called for example every time user types a character to that field. Wowhead shows nice example of what I am trying to achieve this (field with placeholder "Search within results...")
Summary: I am looking for a SIMPLE way of detecting REAL onchange event(not the classic HTML one)and through that call a JS function while not using jQuery?
Use onkeyup instead of onchange then.
Following is a simple way of invoking each type of Key Press on field.
input type="text" onkeypress="myFunction()
Get Example here
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onkeypress
Enjoy..
you can also use onkeyup and onkeydown instead of onkeypress.
Tried onkeypress="myFunction()" or onkeyup="myFunction()"?
There are also events for onfocus and onblur for entering and leaving a textfield :)
You should use "input" event. keyup and keypress don't work if a user modified the value only by a mouse.
If an HTML form field has focus and you hit enter, the form will be submitted (unless you've done fancy things to bypass that). Weirdly though, if JavaScript adds a field into the form, that enter-to-submit behavior appears to break. For example:
http://jsfiddle.net/SChas/1/
function goose() {
document.getElementById("addhere").innerHTML="<input name=goose value=honk>";
}
function checkForm() {
alert("ok");
}
--
<form onsubmit="checkForm();">
<input name="duck" value="quack">
<div id="addhere"></div>
</form>
<button onclick="goose();">add a goose</button>
(This is a contrived example attempting to be as concise as possible. The original code involved is more modern code with events attached in JavaScript, etc. But this is the simplest code that replicates the issue. Also, it is necessary in the real use case to dynamically modify the form by adding/removing fields.)
Anyway, you'll get a form that has a single field with a value "duck". Click into it and hit enter, and the form will submit (you'll see an "ok" alert and then JSFiddle will tell you not to post!).
However, if you click "add a goose", you get a new field. And now, you cannot hit enter to submit the form.
Why is this happening? I can't find anything about this behavior via google, perhaps I'm using the wrong search terms. But it happens in IE on Windows and Chrome and FF on OSX at least. So it seems like an intentional, perhaps to-specification, behavior. Is it some kind of security protection?
And, is there any way to restore the enter-to-submit behavior on the form once a field is inserted? A way other than to add onkey* events to the input fields?
FWIW, it doesn't seem to matter if the inputs are added via DOM methods (appendChild), or setting the innerHTML, using jQuery or old fashioned JavaScript.
This is because the enter-to-submit behaviour only happens when it's the only input on the form.
You can restore it by putting a input with type=submit on the form, it doesn't even have to be visible.
Check it out: http://jsfiddle.net/SChas/10/
I'm having trouble with events in Internet Explorer 7.
When I have a form with two or more input[type=text] and I press enter, the events occurs in this order:
submit button (onClick)
form (onSubmit)
Sample code:
<form onSubmit="{alert('form::onSubmit'); return false;}">
<input type="text">
<input type="text">
<input type="submit" onClick="{alert('button::onClick');}">
</form>
If I have only one input[type=text] and I press enter the submit button onClick event doesn't fire. Sample code:
<form onSubmit="{alert('form::onSubmit'); return false;}">
<input type="text">
<input type="submit" onClick="{alert('button::onClick');}">
</form>
The button's onclick should (I think) only fire if the button is actually clicked (or when the focus is on it and the user clicks enter), unless you've added logic to change that.
Is the addition of the extra textbox possibly changing the tab order of your elements (perhaps making the button the default control in that case)?
From the dawn of browsers, a single input field in a form would submit on enter with or without a submit button. This was to make it simpler for people to search a site from a single search field.
If you need to execute some javascript in a form, it is safer practice to use the onsubmit of the form (and return false to stop submission) rather than executing script in the onClick of the submit button. If you need to execute javascript from a button, use type="button" instead of type="submit" - hope this clarified what I meant
If you want code to run when the user presses enter, just use the onSubmit handler.
If you want code to run when the user presses the button, and not when the user presses enter, use a button other than type="submit".
Interestingly, if you click on the screen (remove the focus from the textbox) on second example with only one textbox, the event onClick fires... So it's not an expected behaviour since it only occurs when you have just one textbox and you have the focus on the textbox.
I'm afraid you've found a bug on the browser and you'll have to find a workaround, or avoid using the onClick event in that case.
I use the onSubmit event for validations because it's a "safer" event that is more likely to work on different browsers and situations.
Out of curiosity, are you using a DOCTYPE, and if so, which one? I'm not saying incompatabilities with the DOCTYPE are the issue, but quirks mode is something to rule out before trying anything else.
You might want to include a dummy hidden input element to recreate the situation where you had two input elements... that way, you'll get both of the events fired
<FORM onSubmit="{alert('form::onSubmit'); return false;}">
<INPUT TYPE="text">
<input type="hidden" name="dummy">
<INPUT TYPE="submit" onClick="{alert('buttom::onClick');}">
</FORM>
IE has a lot of confusing fixes that needs to be done for improving compatibility of our code