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.
Related
I'm building a spreadsheet site using <tr contenteditable="true"> for cells.
I've implemented an onkeyup function whereby pressing enter when focused on a cell shifts focus to the next cell directly below, but the problem is that pressing enter by default also adds a line break with contenteditable elements, resulting in an empty line being created before moving on the next cell.
Both fire at the same time, so I don't have a chance to cancel the keypress without also breaking my function. All of the solutions I've found involve completely disabling the enter key when focused on the element, but that won't work here since my function relies on being able to press enter while focused on the element.
All I need is for the tr to not insert a <br> on enter, I do not need to disable my enter key.
Adding e.preventDefault() on enter events solved the issue. Make sure you only put it on the enter key and not for all keypresses otherwise you will disable text input for the cells preventing you from being able to edit them, and make sure to use onkeypress/onkeydown and not onkeyup.
Big thanks to #Robin Clower and #Zac in the comments.
I have been looking for an elegant solution to converting a submit button to a button. In Internet Explorer you cannot simply change the type of an input. I couldn't change the attribute on a clone of the object either, so I thought I would manually duplicate it by creating a new object and then iterate through the attributes of the submit button to duplicate them. I am checking if the attribute is specified before setting it, but for some reason the value attribute reads as attrib.specified is false despite having a clear value. Why is this?
Update
I want buttons (<input type="input"...>) to submit when I don't have javascript turned on, and I want to execute javascript instead of submitting when javascript is turned on by way of changing the input type to prevent postbacks and to attach event handlers. I have considered replacing the buttons entirely but I would like to be as consistent as possible for the sake of styling, hence switching to button from a submit type, and I want to preserve everything else associated with the submit button, i.e. style, value etc. I would like to just do submitButton.type = 'button', but MSIE does not like this for some rather obscure reason. I hate wrestling with MSIE.
iirc IE will submit the text between the button tags, rather than its value attribute.
I believe a workaround is to burn down microsoft HQ.
You could use a hidden field, or a type=submit and add text to the button with an image.
What are you trying to achieve?
I suspect noscript tags are the best way to get around the lack of js on the client side. I would just rather have found a solution where js added functionality to an existing page.
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!
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?