H5，JS仿微信输入法，键盘上面带input输入框，兼容安卓、ios

H5，JS仿微信输入法，键盘上面带input输入框，兼容安卓、ios

效果如图：

实现思路：先写一个固定定位的input，通过改变bottom的高度将input贴在键盘的顶部，所以这里需要知道键盘高度，但是h5获取手机键盘高度比较困难，为了方便就需要原生告诉我们。
代码如下：

//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();
		}
	}

代码说明:focus()安卓可以正常调起，但是ios因为安全机制，需要用户点击input主动获取焦点，这里需要ios多加一段代码，代码如下：

//
//  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

搞定！！！