Lets say the user focuses on an input, the keyboard pops up.
Then he clicks a button, that just shows a tooltip, not important and I would like the keyboard not to close.
I tried this:
var dontclosekeyboard = document.getElementById('dontclosekeyboard_element_Id');
Then in the the capture phase, meaning i put 3rd parameter to true I try to stop propagation. It sadly does not work.
dontclosekeyboard.addEventListener('click', function(e){e.stopPropagation() }, true);
I am out of ideas, is there any other solution apart from manually doing a '.focus()' on the currently active element?
I had the same problem a while ago showing info-buttons next to form elements. First of all: we finally decided to do that in another way, and work around it.
As soon as you lose focus on your input field the keyboard will be closed and even setting the focus back will cause the keyboard to toggle which is really annoying- with one exception: your tooltip button is also an input field just styled as a button. This way you can set the focus back to the original input without any side effects.
Related
So, I've got this input of type checkbox for a dropdown menu on the top.
When I click on it and select something, for some reason clicking the spacebar toggles it on/off...clicking once elsewhere doesn't fix it either, I have to click outside twice.
I don't quite understand why I have to click twice outside, but regardless, I want to know how I can stop this from happening. I suppose I have to do something with focus...but I can't seem to understand it properly - nor do I know if that is indeed the problem.
If you don't need the spacebar for your any button on the form, you can do an event.preventDefault() on keypress for the spacebar.
I have a situation that happens in several of my components, where I show a new component, that is absolutely positioned and has an input control. I am using some basic logic to set the input control to set focus, which it does successfully.
When the control pops up, I can start typing right away as expected. However, if I click the "Tab" key, in this specific scenario, it navigates the underlying component to the next cell in the grid, instead of the top level div tab control.
However, If I click into the input box on this page with a mouse click, and then type, the tab key works as expected, as it appears the top level component/div does not have focus even though the input control does? Considering the input already has focus, I"m not sure what clicking into the input does, but it effectively solves my issue.
So, what is the difference in setting focus on the input versus clicking into this input box? Is there a way to programmatically give this input the focus it gets that matches clicking into it with mouse?
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.
I'm testing TagDragon jQuery plugin, it's exactly what I need, but is has one annoying "feature", when I click the scrollbar in the suggestion list, it hides it's results. On the other hand jQuery autocomplete plugin doesn't lose the focus on the input field and that's why it doesn't hide its results. But that plugin doesn't provide the functionality I need, so I can't just replace tagdragon.
I've studied jQuery autocomplete code and I can't understand how they keep the focus on the input field, I just can't find the code responsible for that!
So the question of the day is: How to keep the focus on the input when using the scrollbar in the result suggest list?
P.S. Also I have a question of how jQuery autocomplete plugin does it, because it looks like magic to me after studding the code for an hour.
I just asked a similar question, and nobody answered it, so I basically tweaked my own code until I figured out a working solution.
After investigating some of the other pickers out there, I realized that the trick is not to add an event that closes the list on blur, instead simulate a blur event by checking other possibilities by doing the following:
upon the opening of the list, add a click event to the document that
checks to see if the click is not on in the active input, and not on
the active list. If this is true and the click is in fact on a non-listy
part of the document, then close it.
add an event to each list item in the suggest list (when the list is
open only) that selects the value and closes the list.
add an keydown event to the input itself so if the user hits enter,
it changes the value and closes the list.