I have a "select" input that is programmed to open up a modal box when clicked to get some information before proceeding. That part all works great.
The problem is that once the modal box is up, the select dropdown options are all still visible. I want that select input to go back to being a normal, not clicked on at all, select box.
What javascript or jquery code can I use to make that select dropdown clear away?
I think it is more correct to move handler from click to change. In this case select will be close and keyboard changes also will be processed
Try using this instead:
$('#mySelect').focus(function(event){
event.preventDefault();
// code here
});
If that does't work, try using the preventDefault() with the click event.
The focus will at least allows users navigating fields with the keyboard (tab, etc) instead of the mouse.
Prior to jQuery 1.6
$('#mySelectBox :selected').attr('selected', '');
jQuery 1.6 and higher
$('#mySelectBox :selected').removeProp('selected', '');
I'm not sure that you can do it with standard select tag. Maybe because it still has focus. What I did when I needed a customized select tag is to avoid the select tag completely and use a button which graphically looks like the select button. Look at this page - look at the TAX button and the button to the left of it. There is no select tag, but it works great.
Related
I can usually determine if a particular input has focus using $("#my_input").is(":focus") but this doesn't seem to work for selectize inputs.
I can set the focus for the input using $("#my_input")[0].selectize.focus() but then still $("#my_input").is(":focus") returns false.
When I inspect the element in Chrome I can see that a div right below my_input has the class attribute focus but it is not clear to me how to link this to #my_input.
I have also tried document.activeElement and document.activeElement.parentElement, etc. but no luck so far
Selectize.js is hiding the input you wrote in your markup and shows some dynamic elements instead.
Those are next to your original input.
Try:
if( $("#my_input").next(".selectize-control").find(".focus").length>0 ){
console.log("Selectize is focussed!");
}else{
console.log("Selectize is NOT focussed.");
}
If you follow me on this... By looking in the "next" div if there is a child having the focus class, you'll know if it's focussed or not..
Jsfiddle is here.
I have a text box and as the user type keys in the box, the multiple select box must refresh its options.
On input change, I am using this code to refresh select options,
$("select").empty()
filteredOpts.map(function(val){
$("select").append("<option name={0} value={0}>{0}</option>".format(val))
})
But, the view is not getting refreshed with new set of options.
When i move to some screen, (for example, pressing ctrl + shift + c to open chrome console) the view gets refreshed. Same behavior is seen in firefox too where the select box doesn't show the filtered options, but when i go to firebug console and come back, the select box has refreshed its options.
It's because you're only handling the Change event and not the Input event like you say you are. The Change event only fires after the element is blurred.
Change:
$("body").on("change", "#pattern", textChange)
To:
$("body").on("input change", "#pattern", textChange)
(You can probably drop the Change event altogether from that, too).
Working JSFiddle demo.
change event will be fired when you focus out of the text box.use keyup event instead change try this $("body").on("keyup", "#pattern", textChange) .
I have a Bootstrap 3 dropdown menu which lives inside of a element, between two text input fields.
The dropdown's role="menu" attribute allows it to be navigated using the up/down arrow and Enter keys. However, when I make my selection in the dropdown and hit "Enter" the tabindex of the form is reset back to the first input instead of tabbing to the next input field.
Is there a way to focus on the next field in the form without explicitly doing this via JS or a custom tabindex order?
The only option you have is to change bootstrap.js and include the js function there if you don't want to add a new JS file. Bootstrap is done with a combination of CSS and HTML, the behaviour is defined by you. Bootstrap does not provide you methods to handle the behaviour of the elements.
This is the function you need, to handle the behaviour described above. I have tested the function locally and it will handle the enter keypress action as well.
$('.dropdown-menu li a').on('click', function(){
document.getElementById("#myDivId").focus();
});
Hope this helps!
Using jQuery or something similar, is it possible to detect when a user has clicked away, effectively removed focus, from a form field in iOS? I have conventional form which has a first name, last name, address line 1, address line 2 etc.
On an iPad when you select a form field the only way to leave that form field is to select another field in the form by clicking it or by hitting the Previous or Next buttons in the keyboard pane.
As the keyboard pane is shown clicks to other non-input elements on the page are ignored, so focus remains on the form field.
Is there a way with jQuery/JavaScript (or anything else) to force the focus to leave the form field if I click away from it by clicking a non-input form element?
Here's an example of what I mean. In the screen below, when the focus is on the Line 1 element I can't move out of it by clicking a non-input element.
Try just doing a quick blur() on the form, that might work.
$('body').on('click', function () {
$('form').blur();
// And since you said selecting an anchor might help, potentially doing a:
$('a#whatever').blur(); // might do the trick too
});
Is it possible to control the display i.e.(show/hide) of keyboard in iPad Safari through code?
I have 2 form fields;
1. Text box (say Name)
2. Select list/Dropdown (Say State)
My question is when user moves focus from Name to State, the keyboard is still there..Why is it so and how can I hide the keyboard when focus moves to dropdown?
Thank you.
I just ran into a very similar problem, not sure if my solution will work for you.
In my case, I have a text input inside a form. On submit, I'm using e.preventDefault() to stop the page from navigating. I believe this was also having the effect of stopping the default action of hiding the keyboard.
To solve this, I added an explicit input.blur() when the form is submitted. This seemed to be enough for safari to remove the keyboard.
Hope this helps!
I had the same issue. I had a form were keyboard should be collapsed when type out of the field (not native behavior on ipad) and when focus select field. The only solution for me was creation of hidden input
<input type="hidden" id="blurInput" />
and javascript code handler for focus event:
$element = $(event.target);
if($element.is('select')) {
$('#blurInput').blur();
$element.focus();
}
In case you want just to blur input field another solution works perfect, but between input and select it fails
document.activeElement.blur();
$('input').blur();