Losing selection when clicking checkbox label - javascript

I am trying to get a checkbox with a label to function so that when you have text selected in a contenteditable div, clicking on the label will not lose the selection from the div. The label still needs to apply the standard checkbox tick/untick upon clicking it, but keep the focus & selection intack on the div.
Doing a simple focus() on the div won't help as the selection will be gone (and caret is at the beginning). I could of course look into a way for storing the selection object and trying to assign it back after the label click, but isn't there any simpler way of keeping the selection?
(the reason I need to do this with label & checkbox is because I will be using jQuery UI buttons and I will need the the toggle functionality of them)
On a similar note, if you click the checkbox, you usually still keep the selection in the div, but at least on FF4, if you press the checkbox very frequently (<1s), it will lose the selection. Any idea what's going on there? answered below
example: http://jsfiddle.net/niklasvh/gULM9/

It's a Firefox bug marked 490367.
According to the bug description, double-click functionality on input fields will act unusually when there is a contenteditable div on the page.
I noticed the strange behavior while trying to replicate it manually so I guessed it was a bug. I don't know of any workarounds.

Related

make undo apply to drop-down menus and check boxes?

I am using Chrome. I have a page with multiple controls. I make changes in an text input, then to a drop-down (select) control, then to a check box or radio button, and then to second text input. I then press control-z once, and it undoes the change in the second text input. I press control-z again and it undoes the change in the first text input. Is there a way in to make this built-in multiple-undo process include changes to drop-down (select) controls and check boxes / radio buttons, without having to write custom code to save values, track edits, capture control-z events, etc.? I know that code is not terribly hard, but if there's a way to make it just happen that would be nice.
I only care about Chrome, so it's okay if there's a Chrome-specific way to do this.

jQuery Select2 plugin dropdown not responding to mouse clicks

I'n using the select2 jQuery plugin with an ajax call to retrieve items for the dropdown list as the user types. Multiple selections (tags) are allowed and custom selections are allowed. When the dropdown list appears, if I use the cursor keys to go to the item I want and hit enter or tab, then the everything works fine. The select2-selecting callback is triggered and the input gets updated with the selection text.
If I click on an option with the mouse, however, the select2-selecting callback is not triggered and the input is not updated. The only thing that happens is that the dropdown menu disappears, nothing else.
I have another select2 input on the same page that allows only one selection and no custom selections. Clicking dropdown items in that works fine. Example on the plugin site similar to what I'm doing respond to clicks too, so it's not a general bug with the plugin.
I am aware that select2 actually has a hidden, completely translucent container div the size of the screen that is added to the DOM whenever a select2 input has focus. The select2 input sits on top of this 'underlay' and everything else is underneath it. When the select2 input looses focus, the 'underlay' disappears. I thought that the problem might be that the underlay had a higher z-index than the input, so when I click a dropdown item I'm actually just clicking the underlay and causing the input to loose focus. Well, the input (9999) does have a higher z-index than the underlay (9998). I just wanted to rule that out.
This bit of javascript was the culprit:
input.on("select2-blur", function() {
$(this).select2('close');
});
I think that at one stage the dropdown menu was only disappearing if I tabbed out of the input, but if I clicked outside of the input when the dropdown was visible, it stayed there. I had this is as a means to get rid of the dropdown when the input lost focus. It was the cause of the problem though. Strangely, even though I've removed it now, the dropdown disappears appropriately when I click outside the input, but I don't know why that is.

Why does dialog("open") deselect all previously selected text on screen?

I asked this a while back with absolutely no luck (or answers).
I do not wish for this to happen. I can initialize the entire dialog but the second that I call
theDialog.dialog("open");
All previously selected text on the screen is deselected. Technically, speaking, either the selection object is trashed or the range objects boundaries is collapsed - the effect is the same.
I wish for the dialog to be as unobtrusive as possible. Is it possible to have the dialog not effect the user's selection at all?
Is this possibly an issue with events? Is there a way to have the dialog bypass whatever step it is taking that collapses the selection?

How to scroll an HTML select box to an option without directly selecting that option?

My issue is that when the page is refreshed, I want the 'select' to be scrolled all the way to the top. However, if the user has scrolled the select box down to view the options (without necessarily even clicking on any of them) prior to the refresh, the 'select' box doesn't return to the top.
I've seen answers where people say to simply use selectedIndex to select the first option in the list, and thus it will automatically scroll to the top, but this is NOT an option. When the page is refreshed, nothing must be selected and thus, the only code I have at the moment is:
document.form1.componentselect.selectedIndex = -1;
Which is effective at clearing out any selections in the 'componentselect', but does not reset the scroll position.
FYI, I am using straight HTML and JS, no JQuery or anything like that. Thanks.
All you need to do is first select the top item (as you said you don't want to do), but then set it to -1!
document.form1.foo.selectedIndex=0;
document.form1.foo.selectedIndex=-1;
While I was looking at this, I also figured out how to have it remember what was selected, in case that becomes an issue:
http://jsfiddle.net/ryleyb/qPJ4S/
I think it's impossible to change the scroll position in traditional selects (select from the tag, no box generated by javascript plugins) because this box is controlled directly by the user's browser and theme, without direct interference by javascript.
I believe the only way to "reset" the display is to force the user to click on the field again, hiding and redisplaying the select tag. But you will need to click to open the box again and it hinders more than helps the user.

iPad focus-event

I try to get the following working:
I have a form containing selectboxes and inputs.
There are two buttons on top of the virtual keyboard - "next" and "previous".
Navigating through the input fields works.
When I reach a selectbox (by pressing "next"), the keyboard stays and the selectbox shows its items.
When I select an item by tapping on an item of the selectbox, the element is selected and the keyboard disappears.
That's not what I want.
I want the next input or selectbox to be focused or the keyboard to stay.
I read (and tested) that the focus event does not work.
Is it possible to get this running by a workaround?
THX!
then assign the first responder to the next ui element and the keyboard will remain visible. You should do this in the code that accepts the input from the selectbox.
I am speculating, since there is no code included in the question, but I think the suggested approach should work

Categories