H5, JS imitates WeChat input method, with input input box on the keyboard, compatible with Android and ios

H5, JS imitates WeChat input method, with input input box on the keyboard, compatible with Android and ios

The effect is as shown in the figure:

Implementation idea: first write an input with fixed positioning, and paste the input on the top of the keyboard by changing the height of the bottom, so here we need to know the height of the keyboard, but it is difficult for h5 to obtain the height of the mobile phone keyboard, so we need to tell us natively for convenience.
code show as below:

//html
<div id="keybordInput">
	<input class="change-input" type="text" maxlength="40" id="change-input" value=''/>
</div>
//css

#keybordInput{
    display: flex;
    position: fixed;
    bottom: -100px;
    width: 100%;
    padding:8px 0;
    background: #F5F6F7;
    z-index: 99999;
}
#keybordInput input{
	flex: 1;
	margin:0 10px;
	background: #fff;
	border-radius: 5px;
	line-height: 30px;
	max-height: 90px;
	overflow-y:scroll;
    z-index: 99999;
    padding:0 5px;
    box-sizing: border-box;
    vertical-align: middle;
}
//js
//点击input调起键盘
	$('body').on('click','.changeInput',function(){
		setTimeout(function(){
			$('.change-input').focus();
		},10);
	})
	//当键盘调起时，原生给我们传高度，键盘弹起的时候传高度，键盘收起的时候传0（此处的方法是原生约定好的）
	window.keyboardHeight=function(height){
		if(height!=0){
			$('.dd-footer').css('display','none')
			if(isAndroid()){//安卓直接将键盘高度赋值bottom就可以
				setTimeout(function(){
					$('#keybordInput').css({
						'paddingBottom':'25px',
						'bottom':height+'px'
					})
				},100)
			}else{//ios不需要高度，直接写0就可以
				setTimeout(function(){
					$('#keybordInput').css({
						'paddingBottom':'8px',
						'bottom':0+'px'
					})
				},1)
			}
		}else{
			$('.dd-footer').css('display','-webkit-flex')
			$('#keybordInput').css({
				'bottom':'-100px'
			})
			$('.change-input').blur();
		}
	}

Code description: focus() can be invoked normally on Android, but because of the security mechanism of iOS, the user needs to click the input to actively obtain the focus. Here, an additional piece of code is required for iOS. The code is as follows:

//
//  DAWebViewInjection.m
//  TechnicianApp
//
//  Created by pyx on 2020/9/7.
//  Copyright © 2020 Captain. All rights reserved.
//

#import "DAWebViewInjection.h"
#import <objc/runtime.h>

@implementation DAWebViewInjection

+(void)load {
    [self allowDisplayingKeyboardWithoutUserAction];
}


+ (void)allowDisplayingKeyboardWithoutUserAction {
    Class class = NSClassFromString(@"WKContentView");
    NSOperatingSystemVersion iOS_11_3_0 = (NSOperatingSystemVersion){11, 3, 0};
    NSOperatingSystemVersion iOS_12_2_0 = (NSOperatingSystemVersion){12, 2, 0};
    NSOperatingSystemVersion iOS_13_0_0 = (NSOperatingSystemVersion){13, 0, 0};
    char * methodSignature = "_startAssistingNode:userIsInteracting:blurPreviousNode:changingActivityState:userObject:";

    if ([[NSProcessInfo processInfo] isOperatingSystemAtLeastVersion: iOS_13_0_0]) {
        methodSignature = "_elementDidFocus:userIsInteracting:blurPreviousNode:activityStateChanges:userObject:";
    } else if ([[NSProcessInfo processInfo] isOperatingSystemAtLeastVersion: iOS_12_2_0]) {
        methodSignature = "_elementDidFocus:userIsInteracting:blurPreviousNode:changingActivityState:userObject:";
    }

    if ([[NSProcessInfo processInfo] isOperatingSystemAtLeastVersion: iOS_11_3_0]) {
        SEL selector = sel_getUid(methodSignature);
        Method method = class_getInstanceMethod(class, selector);
        IMP original = method_getImplementation(method);
        IMP override = imp_implementationWithBlock(^void(id me, void* arg0, BOOL arg1, BOOL arg2, BOOL arg3, id arg4) {
            ((void (*)(id, SEL, void*, BOOL, BOOL, BOOL, id))original)(me, selector, arg0, TRUE, arg2, arg3, arg4);
        });
        method_setImplementation(method, override);
    } else {
        SEL selector = sel_getUid("_startAssistingNode:userIsInteracting:blurPreviousNode:userObject:");
        Method method = class_getInstanceMethod(class, selector);
        IMP original = method_getImplementation(method);
        IMP override = imp_implementationWithBlock(^void(id me, void* arg0, BOOL arg1, BOOL arg2, id arg3) {
            ((void (*)(id, SEL, void*, BOOL, BOOL, id))original)(me, selector, arg0, TRUE, arg2, arg3);
        });
        method_setImplementation(method, override);
    }
}

@end

Done! ! !