Select Loses focus in IE 11 when the value is selected - javascript

I have a select list on my page in side a table with alot of inline input controls.
The problem is when i change the value of input controls and press "tab" key on my keyboard the focus is shifted to the next input control but when i change the value of my select control the focus is lost completely and nothing happens when i press tab.
I have already tried using this solution but it did not work for me.

Related

How to keep focus on input field after browser repaint?

I have multiple tabs and each tab has its own iframe. During the first rendering tab 1's input text field has focus using JQuery. After switching to tab 2 and coming back on tab 1 does not put back focus on the input field from tab 1.
As per my understanding focus will be set during DOM construction phase and will be rendered by the browser as it is. But on repaint no DOM re-construction happens so JQuery can not put back focus on the input field.
function clearSearchTxtInput(resetResults) {
$("#searchTxt").val('');
$("#searchTxt").focus();
}
Above code is called onload.
Is there a non-blocking way to put back focus on the input field?

Solution to disable default select option open behavior on "NEXT" virtual button of iOS keyboard?

I have developed hybrid application with Cordova (PhoneGap/ HTML / jQuery/ CSS) on iOS platoform and I am facing application crash issue on one scenario.
In the page I have mentioned three select elements in a sequence along with few inputs. When I focus on first input element of form and used "NEXT" button of virtual keyboard to move next element it work fine till it come to first select option. Once first select option get focus by "NEXT" button event it open up its option window. if I do not wait on first select option and press "NEXT" button then my application get crashed. I have tried multiple option to fixed this issue like below:
1) keeping all options disable till user click on its parent div. but event does not work on disable select option. However it work on other area like its associated label.
2) keeping hidden input next to select option with tabindex=1
I searched lot but didn't find any proper solution. Searched to disable NEXT button focus event on select option to remove default behavior of select option on iOS.
Does anyone have idea to fix this issue? Do we have any safari/iOS base attribute to disable default behavior OR any jquery/ javascript solution?
Best Regards,
Jeet

How to remove keyboard when there is no focus in input field in android mobiles

In my application I have three input fields. If I click on first input field and I did not write any validate data, and then I go to second input field -- it is showing a popup because of validation for change event. Here in this the keyboard that appeared when we click on the first input field is not removed when the popup showed up.
For this I removed the .focus for input field and
I tried like this also:
$('input').blur();
But there is no use I don't understand what is the exact problem it comes in Celkon device. Please suggest me any appropriate solution for this issue.

Fire blur event unless specific element is clicked

I have three search categories (see first image). The user selects one and I show the search input that corresponds to that topic in the space of the categories (see second image). I automatically focus on the input with jQuery so the user can easily begin typing. If the user changes their mind and blurs the intput I hide it and again show the three categories.
This all works great if the user clicks enter to search, but I also want to allow them to be able to click the go button next to the search input field. The issue is that if they try to click the go button the input is blurred and then hidden and the submit click is never fired (I cannot unbind the blur event upon clicking this element because it is never fired - the blur is triggered first)
So is there any way to execute the function bound to the blur event (hiding the div) unless this "go" element is clicked using jQuery or JavaScript?
You have several options:
You can only hide the input on blur if the focus has gone somewhere outside its container, so if the focus has gone to the "Go" button, you don't hide the input at all.
You can your code design and fire the search question as an ajax call rather than a form submit.
You can hide the input on blur after a brief setTimeout() which gives the form submission a chance to get sent before it's hidden.
instead of placing the blur event on the input, place the blur event on the container that holds both the input and the Go button.

Hiding the text input cursor (the caret) showing through overlayed elements Internet Explorer

I have a form with a special widget that fills in a text input. When the text input has focus, the widget appears above the text input (intentionally above it) and the user clicks options in it, when they're done it disappears and fills in the input. There is a problem with this in IE, when the widget appears above the input, the field's caret (blinking text input cursor for the field) shows through the widget. The widget is a normal html/css dom structure. It still does this when I set the z-index for the widget to be above the text input. How can I get rid of the caret or make sure it doesn't shine through?
I don't want to set the focus elsewhere for the duration that the widget is shown because the widget requires that the input has focus.
Try setting the unselectable attribute to on while the widget is being shown, then to off at the end. It's an IE specific attribute, and if it works you should check it in IE 8, as I'm not sure if it's still supported.
Seems to me that a simple blur on that field or focus on a field in the widget would fix your problem.

Categories

Resources