I'm using ProtractorJS (and Appium) to test a website on browsers and devices. One of the tests is to type some text in the search box and then hit ENTER. Here is the snippet from the page object.
page.searchInput.sendKeys("Text");
page.searchInput.sendKeys(protractor.Key.ENTER);
The above two lines work fine on any browser and Android devices. However, the same test fails on iOS because the ENTER key is not sent. In the iOS keyboard the key I have to press is the "Search" one.
The test must trigger the search using the keyboard.
Any ideas on how to send the ENTER key on iOS?
If there is no button on the page, Safari will be stubborn about it and not submit the form. In general, I use the button tag instead of the input tag and have better results, but either way unless there is a submit button on the page, and that button is visible (see this question for reference: How to submit a form when the return key is pressed?), Safari will stubbornly refuse to submit the page. In this case, I would put a submit button on the page even though most users will never use it on mobile. You may have fits getting it past your design department. The other option is to use a blur event and trigger it that way.
You can send just new line symbol \n or create tap by coordinate proportions at the right lower corner of the app.
Related
TL;DR
I'm trying to understand what is the difference between user tapping "Go" button on software keyboard and tapping "Sign In" button rendered on authentication web page when using SFSafariViewController to authenticate user via Azure or any other OAuth provider.
Description
We're using various OAuth providers (Azure, Keycloack to name a few) to authenticate users to our native iOS application.
We present to a user, browser instance (SFSafariViewController) with login page
This page contains username, password fields and a button to sign in
When user is entering the password - he/she can either use Log In button on the page or Go button on the iOS software keyboard
In both cases login procedure will be triggered and user will be redirected back to proper URL
However, if user taps Go button on the software keyboard, application is not being notified about redirect (universal link logic doesn't work) and redirect URL page is being rendered inside SafariViewController
It happens in various OAuth providers and can be reproduced only on iOS (when using Android software keyboard button, universal link behaves fine)
We're handling this situation right now by creating special redirect page, which contains special link to a user to tap. Something like "Tap here if you're not automatically redirected back to the application". But I was wondering if there is better solution to this and what is the difference from the OS/Browser perspective between user tapping software keyboard button and HTML page element.
Your workaround seems reasonable.
About activating Universal Links when user navigates from keyboard: this case seems to be similar to situation when user types some URL to browser's address bar and tap GO. If user doing this, than the user intent is to stay in browser, not go to the App. So it is logical to not engage Universal Links.
One more way to make better experience for this case:
if user navigated to "special redirect page" on iPhone, try to navigate to customURLScheme URL of your App. At this point you already know that the App is installed on this device.
Trying to navigate to customURLScheme URL will bring up iOS system dialog, like "Do you want to open XYZ App?". Still this seems a bit better than "Tap here if you're not automatically redirected back to the application".
Probably you already found out that "special redirect page" should be located on different domain than "Universal Links enabled domain". Navigating inside the same domain will not engage Universal Links. For reference, App Preview page that we have, serves essentially the same purpose as yours "special redirect page".
This is because Universal Links on iOS cannot be programmatically opened. When you click the "Go" button you're essentially programmatically submitting the input form (You can recreate this yourself by typing in the Universal link into the Safari bar and clicking go, the app will not open). A Universal Link can only be opened when a user intentionally taps on the link itself or a link that redirects to the Universal Link.
Assuming you have control over the OAuth form, I found the following technique to provide a fairly good experience:
<button type="submit"
style="visibility:hidden; height: 0; margin: 0; padding: 0;"
onclick="document.activeElement.blur(); return false;">
</button>
Add this hidden button ABOVE all other submit buttons on your form. When the Go button is pressed, I've observed that it "clicks" the first submit button on the form. This button catches that click, blurs the current input causing the keyboard to be dismissed, and then cancels the form submission. The user then can tap the visible button(s) on the form to complete the process correctly. No need for two flows.
This also allows for users on desktop using the same OAuth form to press Enter to submit the form or to click the buttons.
I want to know the event in blocks section using which the entered text value can be obtained without a form submission through button.
Let's say user inputs text in mobile phone through keyboard and presses enter. In this case I want some event to trigger and get the value that user entered.
There are 2 events available like lostfocus and gotfocus.
Will these work? Or is there any other good approach for getting text value on pressing enter?
Unfortunately there is no such event like OnEnterPressed available in MIT App Inventor and the events LostFocus and GotFocus will not work in this case.
What you currently can do is
use a button and use the Button.Click event, or
create your own custom keyboard, see also this example
Currently there is a limitation for App Inventor extensions, which only can be used for non-visible components. Later as soon as also visible components are doable, then you could write your own textbox extension and add an event yourself.
Edit concerning the new question in the comments about different screens:
Use different screens wisely
Before starting to create another screen, first you should think about is it really necessary? See also Building apps with many screens and SteveJG's post about advantages/disadvantages, because in only one screen you also can use vertical arrangements to simulate different screens, just set the arrangements to visible = true/false as needed...
You can insert a Clock component that monitors the TextBox1.Text. When it triggers, it checks if the TextBox1.Text has changed and saves it to a variable. When it triggers again, it compares the variable with TextBox1.Text. After the user finishes typing, the variable and TextBox1.Text will be equal and then you can trigger the event like you eanted when the user pressed Enter.
Hope this helps!
I am making an iOS app through xcode for audits where each room in a building uses the same page format but has different information. How can I replay the same page over through an add bar button so that when the add button is pressed the same page comes up but with all the text fields empty.
I assume when you are done putting in the information, you must be saving the information in the local DB or any server may be.
What you can do is, once you are done with putting in all the information display an alert stating that the information is saved and upon the clicking on any button on the alert, clear all the fields.
I'm developing a mobile web app using Ionic and Salesforce1. One part of my app has a super simple form (2 inputs and a text area). The form works great on every device and browser except for within Salesforce1 on iOS. When I tap to focus on a any of these fields - keyboard pops up but nothing I type gets outputted to the input field or textarea.
A few observations...
It may have something to do with ionic being run inside of the Salesforce1 iframe container
It does work on mobile safari, when it is not in the salesforce1 iframe
I was able to get < input > fields working by inserting window.focus() into the top of the ionic method tapHandleFocus(ele)
Using Siri for voice input seems to work.
As I type, the keyboard will show suggested autocomplete words. If i tap these words, they are inserted into the fields as expected.
Once there is text in the field, it is possible to edit the field as expected.
My hunch/guess is that my initial tap focuses on a duplicated field that floats above/under/behind the shown (an Ionic thing). For some reasons typing individual characters isn't successfully putting the values in the shown field??
Let me know if there's any other info I can provide to be more helpful.
I want to have an input field in my page and a button so that the user can manually enter the tweet text and then when he its the submit button, the actual twitter status submit will open with the text the user entered.
moreover, I also want to get a callback when a user submit the tweet on twitter like Web Intents Javascript Events
as far as I know there are 2 ways to do that:
re-render the tweet button after every change of the input using twttr.widgets.load();, something like this example, only instead of the update button use the onchange event of the input. the problem is when the tweet button is re-rendered its disappears for a moment.
the next option is not to use the twitter button, instead when the user hits submit open a new window and redirect to https://twitter.com/share with the tweet text as the query param (like twitter suggest in Build Your Own Tweet Button). the problem with this solution is that I dont get an event when the user submit the tweet on twitter.
Any ideas how I can combine both requirements, dynamically change the tweet text & getting an event on tweet submit?
Not sure if this would work, but my first thought is to use the tweet button, and add an invisible div over it which will capture the user's click, reload the widget with the user's text, and trigger a click on the widget 250ms later (or however long it might take it to reload on a slow device). You'll only get one flicker, so it wouldn't look smooth, but it wouldn't look like a bug either.