How to detect iOS keyboard 'next' key with javascript - javascript

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.

Related

Is there a way to disable focussing of elements when a key is pressed?

I have implemented a first page of an Angular app. This page displays a sidebar-menu, the menu-items of which are a-tags, as well as a table and an image. When hovering above the image and pressing the right-arrow key, the image is replaced with another component.
The issue that I have is: When clicking on a table row and afterwards hovering above the image and pressing the right-arrow key, the table row is focussed. Similarly, when clicking on a menu-item and then switching back to the original menu-item, this a-tag will be focussed when pressing the right-arrow key.
Obviously, I don't want any elements to be focussed when pressing the right-arrow key. The app behaves in the expected way if I click somewhere on the page before hovering above the image. So I am wondering: Is it possible to focus the entire page, maybe, before listening to a key-down event? Or do you have any other suggestions?
Disabled the key event on your table by capturing the event on a function and stop propagation

how to avoid the keyboard obstructing buttons

Hi all I have a window with two text fields and two buttons.When I'm on the second text field, the keyboard is in the way of the buttons. And thus, there is no way to press the buttons. I need to turn the device sideways and a 'done button' appears in my text field which, if clicked, will remove the keyboard. But in the future, I will be locking my app to portrait so I'm just wondering how to solve this issue. Is there a specific keyboard I can call which will have a button to remove the keyboard or anything like that? I'm working with titanium
As suggested, in comments above.
By placing the View inside a ScrollView will allow you to achieve this result. Then when the keyboard is shown for that view you can have the textfield scroll up so it is not covered by the keyboard. Follow this example shown here:
How to make a UITextField move up when keyboard is present?
If you don't want to use a scroll view, or want more control over the 'avoiding', use IHKeyboardAvoiding https://github.com/IdleHandsApps/IHKeyboardAvoiding
(its mine)

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.

'next' in the dropdown on iPhone Safari does not trigger on change event

I am trying to do a straight forward cascading dropdown for mobile safari. I have this working 100% in safari itself, which shows normal style drop downs. But mobile safari dropdowns have a 'next' button.
Hitting this next button takes you to the next drop down in the cascade with triggering onchange() - thus the next dropdown is empty.
The user is forced to press 'done' to trigger on change, then click on the next dropdown.
Does anyone know a way around this. Or what DOM event is triggered by mobile safari's''next'?
Disabling the second drop down from the beginning is the only work around I have found so far! it will disable the "next" button on iphones
Add the disabled attr (disabled="disabled") to you select and use javascript or jQuery to enable or disable.
here is the jQuery code
$(".DD1").focus(function() {
$('.DD2').attr('disabled', 'disabled');
}).blur(function() {
$('.DD2').removeAttr('disabled');
});
here is a live example that is doing this
using jQuery:
http://www.imotors.com/mobile
That's an iOS native overlay, so what you'll get is a blur event when that overlay comes up. Try using the blur event and see how that works.
I have tried many direct solutions to solve this problem with no success. The second pulldown is populated after Safari Mobile's "form assistant" overlay comes up with the spinner (called a "picker" in documentation - http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html), comes up. So the picker is populated with old values.
In another case, if the second cascading pulldown is inactive, the Next button of the form assistant skips right over it. In that scenario, though, once the following form element is landed on, the second pulldown does update itself correctly, so tapping "previous" at that point gives the correct list in the picker.
My "answer" is that Apple is suggesting that JavaScript based cascading pulldowns should not be used but that another UX is to be implemented though I have found nothing that describes this aside from the standard jQuery Mobile type paging menus.

Setting tab order with javascript

I have a page which has multiple forms. I'm using Mootools sliding tabs so each of the buttons on the menu slide along to the next form. There are 3 forms which are technically on the same HTML page. See an example of the technique at http://creativepony.com/archive/demos/sliding-tabs/
My problem is when a user presses the tab key and tabs through to the last field I want the tab order so it goes back to the first field. This is so the user does not accidentally tab to the next form. The user would end up looping back around the same form fields. For the user to reach the next form they use the menu so I don't want them to be able to tab to the next form.
I am aware of setting tab order with 'tabindex' but this doesn't help me make the user return to the first field of that form.
Any ideas how to achieve this with javascript?
I would do this by making the fields in the forms that aren't visible disabled, so the browser knows to skip them, regardless of navigation mechanism (think accessibility aids).
You can do this via event listeners:
$$(".foo").addEvent("click", function(e) {
if (e.keyCode == 9) new Event(e).stop();
$("#myfield").focus();
});

Categories

Resources