I have a form with a few text fields followed by a couple of radio buttons formatted inside a JQM control group. When a user types in the text box, the phone's default keyboard appears (as it should). But when the user clicks on the first radio control group (and presumably the text box looses focus) the keyboard remains visible. Is there a way to hide it?
Try it like,
// you can make a common class and use it as selector
$('input[type="radio"]').on("click",function(){
$('input').blur();// trigger blur event from all inputs.
});
Hope this will work for you.
Related
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.
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.
I have a div in my website, and when it's clicked upon, it reveals the search box (done with jQuery).
However, I would like this div to accept drag'n'dropped text. In my use case, a user selects regular text from anywhere on the site, and drag'n'drops it to copy-paste it into the search box.
If the search box was always visible, he could simply drop it into the text box, handled natively by the browser/OS. However, is there a way I could simulate the same thing with this div? The user would drop his text onto the div, and it would fire the click event to show the text box and paste the dropped text into the box.
My website is uses Modernizr+jQuery+jQuery UI and HTML5/CSS3. IE6 compatibility is a non-issue.
Thank you in advance!
You can use the HTML5 Drag and Drop events:
$('#dropTextHere').bind('drop', function (e) {
var theDroppedText = e.originalEvent.dataTransfer.getData('Text');
});
You can read more about it here.
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.
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