H5, JS imita el método de entrada WeChat, con cuadro de entrada en el teclado, compatible con Android e ios

H5, JS imita el método de entrada WeChat, con cuadro de entrada en el teclado, compatible con Android e ios

El efecto es como se muestra en la figura:

Idea de implementación: primero escriba una entrada con posicionamiento fijo y pegue la entrada en la parte superior del teclado cambiando la altura de la parte inferior, por lo que aquí necesitamos saber la altura del teclado, pero es difícil para h5 obtener la altura del teclado del teléfono móvil, por lo que debemos indicarnos de forma nativa por conveniencia.
El código se muestra a continuación:

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

Descripción del código: focus() se puede invocar normalmente en Android, pero debido al mecanismo de seguridad de iOS, el usuario necesita hacer clic en la entrada para obtener activamente el foco. Aquí, se requiere un fragmento de código adicional para iOS. El código es como sigue:

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

¡Hecho! ! !