I have one form with several text fields and one button. When i enter one of the text fields, the submit button become highlighted and if i press enter while typing, the button is pressed, so i got an unexpecte behaviour because my page is submitted. Firefox doesn't act such a way.
Is there some attribute or configuration to avoid this undesired behaviour or i have to use some javascript technique?
Generally what I do in this situation is make the first button on the form do nothing and then hide it with CSS. Kludgy? Sure. Effective? Absolutely.
In fact, this is a duplicate of Stopping IE from highlighting the first submit-button in a form.
You need to disable the Enter key for those input elements to prevent form submission. Take a look at this article.
Lots of discussion about this here: How to prevent ENTER keypress to submit a web form?
Related
I used to have a form which submit button was just a div, like this:
<div class='submit-form'>Submit</div>
However, that didn't let my users to submit the form when pressing the enter key, so I added the following
<div class='submit-form'>Submit</div>
<input type='submit'>
A submit button, that I hide with CSS, so it's transparent to the user, but it's still functional.
What has happened since I added that is that I have gotten several spam submissions. So, my question is:
Should I remove the input of type submit and somehow add a jQuery listener for the enter key in the form?
OR
Should I add some kind of anti spam security?
I would suggest to use standard html elements in forms, so you can have graceful degradation.
A form without a submit button can cause you more than one trouble (accessibility, javascript enabled in browser, etc...).
This is a general good rule.
Then you can implement a standard (do not reinvent the wheel!), accessible anti spam feature in your form, such as recaptcha.
I have a form whose submit "button" is actually a link. Is there a way to submit this form automatically on enter, other than attaching an event handler to check for Enter keypresses? It just seems a little wasteful to me.
I have tested in Chrome and Firefox, it appears that pressing enter in a form field will submit it, whether or not a submit button is present.
If you've found a browser where that isn't the case, you may want to try a submit button in a hidden div, or CSS positioned off-screen.
Or stick to conventions and use a submit button :P
Throw some jquery on there and submit the form with it:
$("form#formID").submit();
I am looking at writing a jquery plugin that takes a number of input elemts such as input elements, textareas, select html elements etc and once the enter key is pressed in any of the above items, a input button is triggered. As such, the button is set as the default for the fields. Any tips on doing this?
The first input type="submit"/"image"/button type="submit" in a form is the ‘default’ submit button.
If the button you want to act as default should not appear first on the page, then move it around with eg. floats or positioning. Or, if that's not practical, simply have an extra dummy submit button as the first thing in the form, using position: absolute; left: -lots to make it effectively invisible. (You can use tabindex to stop it coming up in the normal tab order; don't use display: none or visibility: hidden as in some browsers that'll stop the button being considered for default.) Catch the default button/submit action from the form.onsubmit event and any other non-default buttons on their own onclick events.
This is a bit of an ugly hack, and it's certainly a pity that HTML provides no way to change the default button naturally, but you are much better off leveraging native browser behaviour here than trying to replace it with scripting, which is trickier than you think. There are a lot of funny little browser behaviours that can trip you up.
For example, if you decide to catch the Enter keypress, you may get unwanted Enter events from users using IMEs. Enter keypresses on an input type="button" or textarea generally shouldn't trigger submit. Enter keypress on a select probably should, except when the keyboard is being used to navigate the dropdown (and you can't reliably tell when that's happened). What if a non-field element inside the form gets focused and Enter is pressed? You won't catch it and in some browsers this will cause a form submit, without your code's intervention, ending up at the default button anyway. Does Shift-Enter or Ctrl-Enter mean submit in a text field? in a text area? Does Enter on a checkbox check it, submit the form, or both? ...
Browsers have many subtly different behaviours here; you'll go mad trying to cover every last little possibility, and whatever you decide on will probably go against the user's expected behaviour. Let the browser's normal default-form-submit code handle it instead.
This is a 2 part question:
1)
click on one of the demo dropdowns on this page. when you tab over to the next input, the text is selected/highlighted in firefox. how can i prevent this from happening?
2) bonus: can you review my code that is hosted on google and tell me what i can improve?
Well, that is just default behavior on Firefox. A possible workaround is to have the input fields execute a JavaScript or jQuery function on select, have the function blur the field (which would deselect the text) and then refocus on the field. Very basic and I'm sure it'd need a couple extra hacks. Unfortunately without scripting, no there is nothing you can do to prevent that.
I honestly recommend that you leave it alone. That functionality was put in place so you wouldn't have to use your mouse when typing into forms, hitting tab would select all the text so you can easily retype it or hit the right arrow key to go to the end of the field. Removing the functionality will only irritate some of your visitors. If they're using the tab key to get to the next field, they probably want that functionality.
Just trying to implement these buttons at the moment: http://web.archive.org/web/20110721191046/http://particletree.com/features/rediscovering-the-button-element/
Can't decide which to go for, since here we mostly use IE6. As far as I can tell...
button:
Lets you submit the form as usual (ie hitting enter on the form), lets you disable it, standards compliant, doesn't rely on javascript
No :hover in IE6 without using Suckerfish, but you can't then style it accordingly and are limited to just one background color & has a horrible black border in IE6
input type="submit":
Also let's you submit the form as usual
Can't include images so you'll have a silly amount of class files for what I need, and again no :hover in IE6 without Suckerfish
a onclick="document.formname.submit()"
Easy to style in IE6 without any hacks
Not so easy to work with, without hacks! ie you can't submit the button with the enter key
... so I'm just wondering, of the three, which one is generally preferred? Ideally I guess I want function over style, but it is a requirement to have Javascript enabled here (it's only for an intranet page) and I guess generally people don't mind too much what's going on in the background? Hmm.
Go for onclick="document.formname.submit()" route for style and add hidden button for functionality.
I recommend the submit button, simply because that's exactly what it's there for. If you have any disabled users, the submit button will be the most meaningful button to them.
If you really don't like the border around the buttons in IE6, than you can always hide the submit button with JavaScript and then create your own button with the styles you want, whenever your home made button is clicked, then you call the submit button's onclick event handler (which will submit the form). This still allows the user to hit the enter key to submit data, and keeps the submit key in there for people who have disabled JavaScript.
If you use <a> with onclick, don't forget to set role="button" and wairole="button" and also set the onkeypress handler to make the "button" accessible!