I'm trying to prevent form submit if users has focus on any submit button or input type text (as in a filtering datagrid).
I'm considering 2 options
replace submit button with some kind of <p onclick='submitform¶meters'>Add</p>
block the enter key on buttons and some preferred input fields
Is there a better way to do this?
If you add an onKeyPress event to the element in question, you can prevent the default action (form submission) by returning false from the function:
<input id="txt" type="text" onKeyPress="var key = event.keyCode || event.which; if (key == 13) return false;"></input>
Note that the which property of the keyboard event is deprecated, but you'll still want to check for it to support older user agents and/or Internet Exploder (reference).
If you don't want to use inline javascript (which is not recommended), you can instead attach an event. Also, it may be better to use the preventDefault (docs) method of the event object, as well as the stopPropagation method (docs) - the necessity for these methods this is highly dependent on what other events you have attached to the form or the elements:
var preventFormSubmit = function (event) {
var key = event.keyCode || event.which;
if (key != 13)
return;
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true; // deprecated, for older IE
if (event.preventDefault) event.preventDefault();
else event.returnValue = false; // deprecated, for older IE
return false;
};
var target = document.getElementById('txt');
if (typeof target.addEventListener == 'function')
target.addEventListener('keypress', preventFormSubmit, false);
else if (typeof target.attachEvent == 'function')
target.attachEvent('onkeypress', preventFormSubmit);
There are other approaches to use, such as attaching a more complex onSumit handler to the form itself - this may be more appropriate if you're going to be doing further manipulation of the form or data before submitting (or using AJAX to submit the form data).
Solution
input id="txt" type="text" onKeyPress="if (event.which == 13) return false;"></input>
Link
http://stackoverflow.com/questions/1567644/submit-form-problem-enter-key
Question closed
Related
Hi I am trying to trigger a click event when enter key is pressed but i'm not sure of a way to do it for ie6
Maybe this:
if (document.attachEvent) {
document.attachEvent("keypress", function(e) {
var keyCode = e.which || e.keyCode
if (keyCode === 13) document.getElementById("button1").click()
})
}
If you really need to do this on IE6, there you go (make sure this is run in IE<9 only):
var input = document.getElementById('some_input'), // Presumably an input element
element = document.getElementById('some_element'); // The element to click
input.attachEvent('onkeydown', function (e) {
if (e.keyCode != 13) {return;} // Quit, no ENTER pressed
element.click();
// Prevents the default action of the event
e.cancelBubble = true;
e.returnValue = false;
return;
});
keydown needs to be listened, since keypress doesn't detect ENTER, and keyup is not cancelable. If the element ENTER was pressed on, is input element, you've to prevent the default action to prevent a form being submitted. Some early IE versions submitted a form on the page even when the input was outside of the form. If the element you're going to hit ENTER is not an input element, or you don't have any forms on the page, the default action preventing is not needed.
I'm solving the problem with default submit button in IE7. When I press "enter" key in input field, than some button on the page is clicked. So I've found the solution for this:
$(document).bind("keypress", function(ev) {
ev.keyCode == 13 && ev.preventDefault();
});
But there is the problem with this code: textarea tag don't get "new line". So I tried this:
$(document).bind("keypress", function(ev) {
if (ev.keyCode == 13 && ev.target.type != "textarea")
ev.preventDefault();
});
It works but looks dirty. The question is: can you advice better solution for the Problem?
Thank you in advance.
If it is to simply prevent the form submission on enter keypress, test on the keypress when the form is trying to submit...
$(your_form).submit(function(ev){
if (ev.keyCode == 13){
// Prevent form submission behaviors if the event was fired by enter keypress
ev.preventDefault();return false;
}
// And code for form submission here, or just keep the return true to make it behave normally.
return true;
});
This is not dirty. But if you want one line, you still could do with:
ev.keyCode == 13 && ev.target.type != "textarea" && ev.preventDefault();
A more elegant solution would be to use jQuery's submit handler and return false:
$('#myForm').submit(function(ev){
// custom form handling code here
return false;// prevent browser default form submission
});
Alternatively, you could also call .preventDefault() on the event object, passed in to the submit handler.
Working with asp.net, and I am trying to find a way to change default ENTER key press target on client side. Based on something like the currently focused div or input.
The target would be asp.net button controls with postback event.
Looking for solution for both IE and Firefox.
I am also using WebForm_FireDefaultButton(event, controlId) trying to set the default button but it doesn't work for Firefox; work fine for IE though.
Look at the Default Button property of an ASP.NET Panel Control
It's too difficult to answer this question without knowing the context. Generally speaking you must prepare javascript with required actions and then add something like
onkeydown = "if (event.keyCode == 13) submitForm(); if (event.keyCode == 27) cancelLogin();"
on client side or something similar on server side to action producing controls. The above example refers to MVC. For WebForms you can use __doPostBack instead of my submitForm() function (link text). Usually I used such scenario with inputs (TextBox controls for WebForms).
here is the cause and solution i just found
Asp.Net Form DefaultButton Error in Firefox
basically, on whatever event you prefer, call the following "FireDefaultButton" function to set the default fire button. The out of box function "WebForm_FireDefaultButton" does not compatible with Firefox (see the link for detail)
function FireDefaultButton(event, target)
{
// srcElement is for IE
var element = event.target || event.srcElement;
if (13 == event.keyCode && !(element && "textarea" == element.tagName.toLowerCase()))
{
var defaultButton;
defaultButton = document.getElementById(target);
if (defaultButton && "undefined" != typeof defaultButton.click)
{
defaultButton.click();
event.cancelBubble = true;
if (event.stopPropagation)
event.stopPropagation();
return false;
}
}
return true;
}
This question already has answers here:
Prevent users from submitting a form by hitting Enter
(36 answers)
Closed 2 years ago.
Is there a way to make a form NOT refresh or call anything when you hit "Enter" key on your keyboard?
Thank you so much!!!
I found this code for preventing Enter from working, but it DOESN'T work in IE :(
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
}
Try this:
$(function() {
$("form").submit(function() { return false; });
});
Disabling the submit event isn't a good idea. Now you can never submit the form by pressing the button where it is for.
Rather hook on the keypress event:
<form onkeypress="return event.keyCode != 13">
or in jQuery flavor:
$('form').keypress(function(event) {
return event.keyCode != 13;
});
13 is the keyCode of Enter key. This works in all browsers from IE6 up to with all the current ones. You only have to take textareas into account. You may then consider this construct instead:
$(':input:not(textarea)').keypress(function(event) {
return event.keyCode != 13;
});
add onSubmit property on form's tag.
<form onSubmit="return false;">
You can prevent form submission by 'enter' key natively if you are using AngularJS.
According to HTML specification and AngularJS, you need to check this list:
Form must have NO action=... attribute (AngularJS handles it automatically)
Form must have NO button with type="submit" attribute
So, if you have no action attribute and submit button, then your form should not be submitted by hitting enter key.
Also, cross-browser keyCode is this:
var code = (e.keyCode ? e.keyCode : e.which);
I don't want my website's user to use backspace to go to the previous page,
but I still want to keep the use of backspace,
just like deleting wrong typing.
How can I do?
Thanks a lot.
As others have mentioned there are methods in which you can monitor for backspace key events and perform different actions.
I recommend against catching the backspace key for a couple of reasons:
1) It's simply irritating and irritated users are likely to not return to your page.
2) Backspace is not the only method of returning to the previous page. There are other key combinations that can accomplish the same thing, as well as the obvious "back button".
Don't do it - but if you must, use onbeforeunload() rather than trapping browser specific key strokes.
Solution: Place the following code toward the end of all your pages that contain forms:
<!-- Block the Backspace and Enter keys in forms, outside of input texts and textareas -->
<script type="text/javascript">
function blockBackspaceAndEnter(e) {
if (!e) { // IE reports window.event instead of the argument
e = window.event;
}
var keycode;
if (document.all) {
// IE
keycode = e.keyCode;
} else {
// Not IE
keycode = e.which;
}
// Enter is only allowed in textareas, and Backspace is only allowed in textarea and input text and password
if ((keycode == 8
&& e.srcElement.type != "text"
&& e.srcElement.type != "textarea"
&& e.srcElement.type != "password")
|| (keycode == 13 && e.srcElement.type != "textarea")) {
e.keyCode = 0;
if (document.all) {
// IE
event.returnValue = false;
} else {
// Non IE
Event.stop(e);
}
}
}
for (var i = 0; i < document.forms.length; i++) {
document.forms[i].onkeydown = blockBackspaceAndEnter;
}
</script>
I have the following comments about what other people answered here before:
Someone said:
"Please don't. Users like
backspace-to-go-back; going back is
one of the most vital browser features
and breaking it is intolerably rude."
My answer to him is:
Yes, usually people DO use the back-button to go back, BUT NOT on pages with FORMS. On the other hand it is really easy for people to accidentally click near or outside an input text or textarea, and then press the back button, so they will lose all their edits, as someone else also noticed:
"Users aren't in a textbox and hit the
backspace, completely losing all the
form information they've just entered.
Wouldn't normally be a problem, but
for us, we're filling out lots of text
on long state forms."
The same undesired behaviour can also be said about the Enter key to submit the form, which usually is only desirable (if ever) for small forms with a few fields, but not for forms with many fields and select boxes and input boxes and textareas, in which most of the time you DO NOT want that the form is submitted when you press Enter.
So this is why I suggest the code above, which applies to all <FORM> tags the function suggested by webster, but without the checks for ALT, which I don't think is useful, and without the checks for CTRL+N and CTRL+R and CTRL+F5, which we don't want to block, because when they are used they are NOT accidental.
Unfortunately, the code above does not work in Firefox when you have DIVs and TABLEs inside your FORM! That is because the keydown event seems to not be propagated to the containing form, and instead the default (UNDESIRED!) behaviour is applied for the Backspace and Enter keys.
I couldn't yet find a solution for this one...
You can use the "onbeforeunload" property on the body tag to prompt the user that he is leaving the page.
You can simply use the following code snippets to block the backspace when the cursor is in texarea, text and password controls.
function onKeyDown()
{
if((event.altKey) || ((event.keyCode == 8) &&
(event.srcElement.type != "text" &&
event.srcElement.type != "textarea" &&
event.srcElement.type != "password")) ||
((event.ctrlKey) && ((event.keyCode == 78) || (event.keyCode == 82)) ) || (event.keyCode == 116) ) {
event.keyCode = 0;
event.returnValue = false;}
}
Call this function from body tag onkeydown event
Filme Noi Cinema has the right answer, but the example code is a bit dated. I just needed this solution so I thought I would post the code I used.
//I use the standard DOM method for accessing the body tag, because the
//non-standard HTML DOM shortcuts are not stable. The correct behavior is
//dynamically attached to the entire body using the onkeypress event, which
//is the most stable event to target cross browser.
document.getElementsByTagName("body")[0].onkeypress = function (event) {
var a = event || window.event, //get event cross browser
b = a.target || a.srcElement; //get source cross browser
//the only thing that matters is the backspace key
if (a.keyCode === 8) {
//if you are a textarea or input type text or password then fail
if (b.nodeName === "textarea" || (b.nodeName === "input" && (b.getAttribute("type") === "text" || b.getAttribute("type") === "password"))) {
return true;
} else {
//backspace is disabled for everything else
return false;
}
}
};
This code needs to be executed before the user starts engaging the page. There are numerous ways to do this:
You can put the above code into any function that is already attached to the onload event.
You can wrap the above code that is bound to the page's onload event.
You can put the above code into a self executing function.
Examples:
//self executing function
(function () {
the solution code here
}());
//wrapper to onload event
document.getElementsByTagName("body")[0].onload = function () {
the solution code here
};
I am adding this code to Pretty Diff if you want to see an example in action.
You should be able to attach a onKeydown/Up/Press listener to your window. In this function, look at the keycode that was pressed, and at the event target. If the keycode is backspace, and the target is NOT an input box or a textarea, prevent the event.
I finally found one that works on all browsers.
It's by Hazem Saleh
His website address is:
http://www.technicaladvices.com/2012/07/16/preventing-backspace-from-navigating-back-in-all-the-browsers/
/*Starts here:*/
document.onkeydown = function (event) {
if (!event) { /* This will happen in IE */
event = window.event;
}
var keyCode = event.keyCode;
if (keyCode == 8 &&
((event.target || event.srcElement).tagName != "TEXTAREA") &&
((event.target || event.srcElement).tagName != "INPUT")) {
if (navigator.userAgent.toLowerCase().indexOf("msie") == -1) {
event.stopPropagation();
} else {
alert("prevented");
event.returnValue = false;
}
return false;
}
};
/*Ends Here*/