How to programatically open html select options on ipad - javascript

I tried with focus, select, triggering click/tap events but no luck.
I see Facebook sign up page implementing this.There is a exclamation mark. It will show up if you touch any of the birthday select control without changing it and then focus elsewhere. The interesting thing happens when you tap the exclamation mark on iPad Safari. The year options will show up. (It doesn't show on desktop Chrome which I'm using to type this ask).
So the question is how to implement the same behavior for iPad?
I put the picture of the Facebook sign up page at http://imgur.com/Hh6JHPW
Some code I tried:
$('#someselect').val('test');
$('#someselect').focus();
$('#someselect').click();
$('#someselect').prop('selectedIndex',0);
$('#someselect').mousedown();
$('#someselect').prop('size',10);

You can just use a hidden <label> with some Javascript to show it if the dropdown's value is the default.
jsfiddle

Related

How to keep a hover effect by selecting a browser suggestion?

I have a WordPress + WooCommerce website and by hovering Login / Sign Up on the header it leads to open a dropdown box where you can enter login details or register. The kind of issue described below also occurs on official theme demo website, at https://xstore.8theme.com/
Now, if I click on "Username or email address" field, Google Chrome shows me an account suggestion based on previously saved accounts on this website. You could try by attempting to login with whatever credentials and if you save them on Chrome (even if wrong), the browser will suggest them to you from the next login attempt. If you just hover the suggestion, all the dropdown box disappears. I said, "just hover the suggestion", because actually you do not have time to click on it.
I suppose this is due to hover effect, in fact if you move the cursor out of the dropdown box, this last disappears, and so happens with the suggestion making it like it was out of the dropdown box.
You can watch a video of the issue at:
https://s.nimbusweb.me/share/3721505/q5vwlz9bho2yufufoiic
How could I solve that?
Thank you in advance,
Alberto
I've had this Problem many times with outdated versions of chrome.
Have you tried updating your browser?
Do you have the same issue in other browsers?
Running updated chrome, I have not experienced this issue on the Demo Page (https://xstore.8theme.com/)

Javascript/Cordova keyboard control

I'm trying to get access to the mobile keyboard in a cordova app so that while the user is signing up, they can just jump to the next input on the keyboard. For example, on iOS native apps, you have access to change the "return" button to "next" or "go."
I've looked at the Ionic-plugin-keyboard but as far as I can see it doesn't allow you to do what I'm trying to do. Is there a way I can change those buttons with js/is there another plugin I can do that with?
Here are some potential resources for keyboard control:
link 1
link 2
link 3
In summary: On most devices it show a "next" button when adding the attribute tabindex to each input, incrementing in order. Otherwise it is generally suggested to set an input as the browser's default focus, or to detect when the user clicks "ok" and move the focus after that event (key code for "ok"/"enter" is 13).

How to remove or disable "Define" option when selecting text in an HTML input control on an iOS 7 WebView?

I have a simple input (type="text") html control being displayed inside a WebView in our iOS application.
When the text is selected inside the input control, an iOS dialog automatically appears with four options: "Cut", "Copy", "Replace...", and "Define". I need to be able to remove or disable, at minimum, the "Define" option.
The reason for this is because our application is typically used for connecting to another device on a local area network lacking an internet connection. When the "Define" option is pressed, it would appear iOS attempts to make some sort of internet request to search for something. When there is no internet connection present, the iOS application appears to lock up for a full 5-10 seconds, wrecking all sorts of havoc in our application.
Is there any sort of CSS, HTML META, or iOS option to prevent the "Define" option from being available?
In case anyone is confused, here is an example of what I'm talking about:
By using css you can prevent selection of the text, so menu will not apper( with user-select:none).
Also you can disable this menu to show using this link prevent define from showing in edit menu

Unable to trigger keyboard on input focus through JavaScript

I'm developing an web application that contains a form with two input elements. One of the user requirements is that after inserting a character into the first input it should automatically trigger the focus of the next element and show the keyboard.
After googling about it seems that isn't possible to programatically trigger the keyboard on iOS through JavaScript. The reason however isn't quite clear to me, some say that is an UX feature but I can't find any official information about it.
So my question is, where can I find some official specs that explain the technical reasons whereby this isn't possible?
Official specs:
http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html#//apple_ref/doc/uid/TP40002079-SW1
Unfortunately, the official specs will not answer your question.
Generally, with forms on iOS safari, the keyboard will stay open until the user chooses to close it. When you auto-focus the next form input, does it close the keyboard?

Forcing keyboard to display when a text input is selected

The scenario, I have an input text field I'm doing partial auto-complete on (exactly like the Tags input field on Stack Overflow... because that's what is, basically).
As a user is typing, I suggest things they may typing; the user then clicks one the suggestions, it replaces a bit of the fields content, and places the cursor after where the insert occurred.
All this works, but after the insertion the software keyboard isn't shown anymore. You can replicate this on the desktop Stack Overflow site.
The code on SO isn't exactly the same, though the symptom is.
Here's the actual code called after the text is inserted into the text field.
$(field).focus()[0].setSelectionRange(newCaretPos, newCaretPos);
(Yes yes, setSelectionRange is non-standard; but it works on all the mobile devices I care about just this moment, so ignore it for now)
On android, iphone, etc. this works fine (the keyboard "flickers" but I'm willing to live with it.
So, the question basically boils down to: How can I force the onscreen keyboard to appear on Windows Phone 7 (Mango update)?
Sorry, there is no guaranteed way to force the SIP to display in WP7. :(
Normally setting the focus on the textbox would force the keyboard. Have you tried just setting the focus? (i.e. not setting the selection range)

Categories