Question

我在一个Webview中使用contentEditable div来实现我的一个应用程序中的某些编辑器功能。 html代码接缝可以正常工作，并且可以在我的android chrome浏览器中响应键盘显示和隐藏操作，但是当我在react-native中使用webview尝试相同的html代码时，它不会响应键盘，并且内容隐藏在键盘后面。

我尝试将其滚动到div的末尾，然后根据内容自动增加其高度，但没有任何效果。

从'react'导入React，{组件};

从“ react-native”导入{View，WebView};

webviewEditor类扩展了组件{

render() {
    return (
        <View style={{flex:1}}>
            <WebView
                source={{
                    html: `
                        < head >
                            <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
                            <style type="text/css">
                            html, body {height: 100%;}
                            body {
                                margin: 0;
                                }
                            #wrap {
                                height: 100%;
                                width: 100%;
                                overflow-y: scroll;
                                -webkit-overflow-scrolling: touch;
                            }
                            #editor {
                                padding: 10px;
                            }
                        </style>
                        </head>
                        <body>
                    <div id="wrap">
                        <div id="editor" contenteditable="true">

                        </div>
                    </div></body>
            `}}
                ref={web => { this.webview = web }}
                style={{ flex: 1 }}
                scalesPageToFit={false}
                scrollEnabled={false}
                javaScriptEnabled={true}
                automaticallyAdjustContentInsets={false}
            />
        </View>
    );
}

}

我希望结果是webview就像在浏览器中一样滚动到键盘的上方，但不会在webview内部的应用程序中显示。

react-native webview中的“ contentEditable” div隐藏在键盘后面

0 个答案: