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?
Related
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.
I am using Aurelia Framework for my SPA.
I have a change event in the input tag and click event on the "Continue" button with their respective functions as shown in the attached image.
The row where input and selects has been placed is a template(as separate view and view model), and this template is being composed in a page which have back and continue button.
Issue:
Case 1:
Page is loaded with default value of input tag and value is assigned using value.bind, now enter some value in the input tag and click on "Continue" button without losing the focus from input tag.
In this scenario only foo(change.delegate) is getting triggered not foo2(click.delegate)
Case 2:
Enter some value in the input tag and lose the focus, again enter some value in the input tag, now click on "Continue" button without losing the focus from input tag, foo2 is executed without any issue.
I am unable to understand this behavior.
I tried using "trigger" in-place of "delegate", even that is not resolving the issue.
Any suggestion or help is appreciated.
So I have a small SPA written in JS. It has several input fields, but no actual 'form'. Everything is bound with JS.
When the user gets to the last input on a form page, if they press 'tab' or 'enter', I hijack the key event and fire the animation to scroll the next form page in. This all works great.
However, when a user visits on iOS (or android for that matter) if they start filling out inputs and hit the 'next' key, when they reach the end of a form section, the device focuses the next input off screen, and breaks the entire layout, scrolling the viewport in awkward ways and such.
So my question is
1) Is there a way through JS to hijack the 'next' button and properly fire my animations?
or
2) Is there a way to hide the prev/next buttons?
or
3) Is there a way to prevent the 'next' button from jumping to the next section?
I tried making a small jsfiddle that fired an alert on keyup, but the 'next' key doesn't seem to have any sort of keycode, or even to fire the keyup event :/
Thank you for any help.
I'd try adding hidden dummy input field after the last real field on each page, and going to the next page any time it gets focus.
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.
Given that
The Browser has a page loaded with an exisitng field (call it ef) with tabindex=1,
Two new fields are inserted via bookmarklet (nf1 and nf2)
first time (incorrect behavior)
When the mouse is clicked on nf1 followed by a tab
the focus acts as if the tab was entered from field ef and goes to a place
other than nf2.
second time (correct behavior)
Now, if the same actions were repeated i.e. mouse clicked on nf1 followed
by a tab the focus goes to nf2.
One way I've ensured that the focus goes to nf2 from nf1 the first time around is
to hardcode tabindex values to fields nf1 and nf2. But this is suboptimal as one
needs to make sure that there are no tabindex conflicts i.e. if there are two fields
where tabindex=1 than focus goes from one to the other instead of to the
proximate tabindex=2
So, what can be done to ensure that the behaviour that manifests
on the second time manifests on the first time.
ps: jquery is available on the page
I rarely use the tabindex attribute so I haven't encountered this property. However, I have written interfaces with similar functionality (fields are added dynamically) with normal tab behavior. I would suggest just removing the tabindex attribute and see if that fixes the problem.