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.
Related
The task is to implement an input which have a submit element right after the text end and submit element can move when user is typing or inserting text in the input (user can't delete this element or cange it, only click to submit text and also user can't type text after it). First implementation that I tried dealed with input event of textarea, counting absolute submit element position depending on input text length. It seems that this is not a good solution due to troubles with this event, especially then any key is pressed for a long time (input event simply fires just once). So I'm looking for solution with contenteditable. The problem explained here is similar to mine in some way but still I can't figure out how to implement this in my case.
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.
I am using Firefox to do this but it works in IE6 ... go figure.
Basically I have code written to traverse a grid of input elements using arrow keys. All of that is working just fine. I can move freely to any field using the arrow keys. When I use up or down arrows the select function seems to work correctly by selecting all text in the next field. (desired result)
document.getElementById(id).select();
However when I traverse left or right the text seems to be using a default browser function to move the cursor once to the left or right after the select happens forcing the user to select all the text again (undesired result).
Is there a way to disable that in firefox so my text gets selected correctly? The typical workflow for my users is to just hit the arrow key then start typing numbers ...then repeat.
I'd say this behavior is caused by the keyup event. Did you try to stop it?
edit: yep, works fine when keyup event is cancelled : http://jsfiddle.net/D6ANY/1/
From your description, it seems to me that you are trying to achieve a "spreadsheet" like effect. If thats the case, then the behaviour you are implementing could confuse users. e.g. in spread sheets the selection moves with arrow keys for each cell but if you have to edit a cell, you need to hit the enter key. That makes it editable and then hitting the enter key again will make it read-only
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.
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?