Mobile Web page input Control soft keyboard

On an interactive level, the process of completing a function (getting the information you want) is called a user path. The longer the user path, the greater the complexity of completing the functionality and the worse the user experience. So when you open a form interface that requires the user to fill in information, in order to improve usability, the PC will generally focus the cursor to the corresponding input frame (input), the mobile side is the same, so that the corresponding input to get the focus state, evoking a soft keyboard, convenient for users to input directly.
This article regardless of the PC side of the scene, on the mobile side (IOS, Android) to achieve this seemingly insignificant effect is actually need to undergo a toss, we slowly look down to the following three common scenarios.

First, when entering the form page, let the soft keyboard open automatically

This requirement is more common, but it is also the most difficult. Science, we can directly in the JS to get input, give it focus is done. But this is not working in a mobile browser.
In addition, H5 provides the Autofocus property, the compatibility of this property is shown on Caniuse does not support IOS safari,android is also to 4.4 to start support, so we can ignore this property, but the following will refer to this property again.
So in IOS you want to automatically focus on input after the page load is complete, opening the keyboard is not very realistic at the moment.
The most difficult is not Android also, currently conducted a simple test system browser and APP embedded WEBVIEW,H5 input is the focus state, but can not arouse the keyboard, keyboard, keyboard ...
Scene one, temporarily no solution ... (Can be implemented in the Hybrid App below)

Second, when clicking on an element in the page to evoke a soft keyboard

This is relative to the scene one, more user interaction this step. So is it possible to use JS to successfully invoke the keyboard on IOS? The answer is yes.

<!-- HTML -->

<input id="input" type="text" placeholder="this a input"/>

<button id="J-focus-btn" onclick="clickFocusBtn()">focus input</button>

// JS

function clickFocusBtn() {

    document.getElementById("input").focus();

}

If you have children's shoes that use Zepto, this way you need to be aware that you cannot use tap events for IOS.

// JS  zepto

$(‘#J-focus-btn‘).on(‘tap‘, function() {

   $(‘#input‘).focus();

});

If the Zepto tap event is used, it does not achieve the desired effect on iOS, which involves a default security mechanism for iOS WebView. There is a property in UIWebView:

@property (nonatomic) BOOL keyboardDisplayRequiresUserAction NS_AVAILABLE_IOS(6_0); // default is YES

This property defaults to Yes, which means that the keyboard must be user-interactive to appear. Then we know why, zepto. The internal trigger of the tap event is within the setTimeout, meaning that when the focus is executed, the execution environment is not triggered by the user, so focus is intercepted.

// zepto

tapTimeout = setTimeout(function() {

  // trigger event

}, 0)

If we're writing the Hybird App page, you can let Native coder set the Keyboarddisplayrequiresuseraction property of the UIWebView to NO, you don't have to worry about it.
However, IOS Wkwebview does not support this property, but there are programs on the StackOverflow, you can use the runtime method swizzling hack out, see this link stackoverflow.com/ques Tions/3 ...
Then scene one in their own Hybrid App can still be achieved, of course, the system native Safari browser We can do nothing, to optimize a little bit.
At the same time, the next autofocus property is tested, and it can work properly if the keyboarddisplayrequiresuseraction is set to NO.
Under Android, it is also possible for the user to click on the focus to specify input after the effect, and there is no iOS mechanism.

Three, form page multiple input in turn autofocus

This scene is actually a combination of scene one or two, combined with the above two scenarios of the test analysis, in their own * IOS Hybrid App * Rely on Native WebView is achievable, in Android and external browser can be achieved in addition to the first focus on the auto-focus.
Currently IOS UIWebView settings keyboarddisplayrequiresuseraction = NO, you need to delay focus in the blur event to take effect (for unspecified reasons):

// Hybrid App 内

document.querySelector(‘#input1‘).focus();

document.querySelector(‘#input1‘).addEventListener(‘blur‘, function() {

   setTimeout(function() {    // 必须延迟

       document.querySelector(‘#input2‘).focus();

   }, 200);

});

Within system Safari, because keyboarddisplayrequiresuseraction defaults to YES, you are not allowed to call focus outside of the execution environment that the user interaction produces, so you cannot defer execution.

// 系统 Safari 内

document.querySelector(‘#input1‘).focus();

document.querySelector(‘#input1‘).addEventListener(‘blur‘, function() {

   document.querySelector(‘#input2‘).focus();

});

In Android, the auto focus after the page is loaded still just appears, not the keyboard ... Follow-up autofocus is no problem, as shown in the status ...

In order to solve this problem, in the Hybrid App can be jsbridge to allow Android native to evoke, the subsequent blur event, then focus does not need to be native and then processed.

// Android 唤起键盘

InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);

imm.showSoftInput(view, 0);   // view 为当前 webview

Summary

Summary below:

• In order to automatically focus on input and eject the keyboard when the page is loaded, the IOS APP's WebView will be supported by setting Keyboarddisplayrequiresuseraction to NO. Under Android, you can only rely on the Jsbridge call Android native method to evoke the keyboard.

• Clicking on the element focus specifies that Input,ios/android is supported, but IOS must ensure that focus is called directly in the function execution environment of the User Action event (zepto tap pits).

• Focus Input,ios in turn a bit special, or see the above scenario three ...

LINKS

• Https://stackoverflow.com/questions/6287478/mobile-safari-autofocus-text-field

• Https://stackoverflow.com/questions/32407185/wkwebview-cant-open-keyboard-for-input-field

• 推荐↓↓↓ 

  Web front-end development Hot news, daily 10:24 broadcast

Mobile Web page input Control soft keyboard