Question

您是否有任何想法在WebView的此输入中创建onFocus事件？

            export default class App extends Component {

             render() {

              return (

              <View style={styles.container}>

             <WebView
                 originWhitelist={['*']}
                source={{ html: ' </br></br><form> <input type="text" 
                placeholder="name" onFocus=(*****)/> <input 
                 type="text" placeholder="surname"/> <Button>Submit</Button> 
             </form>' }}  />

            </View>
                    )}}

我尝试了通常的onFocus，但是没有用。我想在输入焦点时调度事件

Answer 1

该功能已关闭Pull Request。目前，您可以使用react-native-enhance-webview

我希望能有所帮助。祝你好运。

Answer 2

要使onFocusEvent成为Webview的输入，我们只需要处理postMessage和onMessage。这是完整的代码：

      let Script = `
      document.getElementById("input").addEventListener("focus", function() {  
       var data = {
      type: "OnFocusEvent",
      message : "OnFocusEvent"
     };
      window.postMessage(JSON.stringify({data}),"*");
        });
      `;

    <WebView
      style={{ flex: 1 }}
      source={{
        html:
          '</br></br></br></br><form > <input id="input" class="input" type="text" 
        placeholder="Product barcode "/></form>'
      }}
      keyboardDisplayRequiresUserAction={false} //ios
      autoFocus={true} //android
      injectedJavaScript={Script1}
      automaticallyAdjustContentInsets={false}
      allowFileAccessFromFileURLs={true}
      scalesPageToFit={false}
      mixedContentMode={"always"}
      javaScriptEnabled={true}
      javaScriptEnabledAndroid={true}
      startInLoadingState={true}
      onMessage={event => {

      alert("You can do here whatever you want")

      }}
      onLoad={() => {}}
    />

使用React native将输入集中在WebView中

2 个答案: