Flutter_Webview 鍵盤彈出問題
2019 0815 更新
截止8.15肮帐，WebView_flutter 又多出許多坑了纷责。。臣樱。
webview_flutter ^0.3.7+1 pub鏈接
webview_flutter在Android上沒有辦法彈出鍵盤,github上的issue已經(jīng)提了很久,但是官方的milestone還要到19年的十月 issue #19718,(截止發(fā)稿時已經(jīng)有一個PR到master分支了,但是stable分支的同學(xué)可能就還要等一哈了),但是PR的解決方案在AndroidN之前并沒有用...comment
1.來自其他同學(xué)的啟發(fā)
隱藏TextField方案,這個方案的簡單思路就是在
onPageFinish時給Webview注入一段js代碼,監(jiān)聽input/textarea的focus事件,然后通過JSChannel發(fā)送給隱藏在WebView之后的TextField,通過TextField間接喚起軟鍵盤然后,通過監(jiān)聽TextField的onChange事件給input/textarea設(shè)置新的值
下面是他的JS代碼實現(xiàn):他用js監(jiān)聽某個網(wǎng)站的幾個需要彈出輸入法的element,focus事件/focusout事件
inputs = document.getElementsByClassName('search-bar');
header=document.getElementsByClassName('site-header');
header[0].style.display = 'none';
buttons = document.getElementsByClassName('icon');
buttons[0].focus();
if (inputs != null) {
input = inputs[0];
InputValue.postMessage(input.value);
input.addEventListener('focus', (_) => {
Focus.postMessage('focus');
}, true);
input.addEventListener('focusout', (_) => {
Focus.postMessage('focusout');
}, true)
}
JSChannel:
javascriptChannels: Set.from(
[
// Listening for Javascript messages to get Notified of Focuschanges and the current input Value of the Textfield.
JavascriptChannel(
name: 'Focus',
// get notified of focus changes on the input field and open/close the Keyboard.
onMessageReceived: (JavascriptMessage focus) {
print(focus.message);
if (focus.message == 'focus') {
FocusScope.of(context)
.requestFocus(_focusNode);
} else if (focus.message == 'focusout') {
_focusNode.unfocus();
}
},
),
JavascriptChannel(
name: 'InputValue',
// set the value of the native input field to the one on the website to always make sure they have the same input.
onMessageReceived: (JavascriptMessage value) {
_textController.value =
TextEditingValue(text: value.toString());
},
)
],
),
接收事件更改TextField的text,通過focusNode來喚起/隱藏 軟鍵盤
這個方案看起來很好,但是手寫監(jiān)聽所有Classname可太笨了...而且如果用戶在彈出鍵盤后手動關(guān)閉鍵盤(按軟鍵盤上的關(guān)閉按鈕),軟鍵盤就再也彈不出來了...
2.自己的方案升級
- 用兩個TextField交替接收事件來解決無法在手動關(guān)閉鍵盤后重新喚起的問題
- 注入JS監(jiān)聽所有input/textarea element,不監(jiān)聽focus/focusout事件,監(jiān)聽click事件,有幾個好處
1. 可以獲取用戶當(dāng)前文字選擇/光標(biāo)位置
2. 可以判斷再次點擊事件 - 記錄當(dāng)前focus的element,用于判斷是否需要重新喚起新的鍵盤
下面的簡單的代碼實現(xiàn):
var inputs = document.getElementsByTagName('input');
var textArea = document.getElementsByTagName('textarea');
var current;
for (var i = 0; i < inputs.length; i++) {
console.log(i);
inputs[i].addEventListener('click', (e) => {
var json = {
"funcName": "requestFocus",
"data": {
"initText": e.target.value,
"selectionStart":e.target.selectionStart,
"selectionEnd":e.target.selectionEnd
}
};
json.data.refocus = (document.activeElement == current);
current = e.target;
var param = JSON.stringify(json);
console.log(param);
UserState.postMessage(param);
})
}
for (var i = 0; i < textArea.length; i++) {
console.log(i);
textArea[i].addEventListener('click', (e) => {
var json = {
"funcName": "requestFocus",
"data": {
"initText": e.target.value,
"selectionStart":e.target.selectionStart,
"selectionEnd":e.target.selectionEnd
}
};
json.data.refocus = (document.activeElement == current);
current = e.target;
var param = JSON.stringify(json);
console.log(param);
UserState.postMessage(param);
})
};
console.log('===JS CODE INJECTED INTO MY WEBVIEW===');
UserState是定義好的jsChannel,接收一個jsonString形式的參數(shù),data.initText是初始文字,selectEnd selectStart是文字選擇位置,refocus是判斷是否重新點擊focus的Element的標(biāo)記,element被點擊時:
* 先判斷是不是refocus,發(fā)送給channel
接下來要處理JSChannel收到的數(shù)據(jù)了,其中showAndroidKeyboard是自己編寫的一個PlatformChannel,用來顯示軟鍵盤,代碼還可以簡化,我這里就不寫了,有改進(jìn)的請和作者聯(lián)系…也是在踩坑中.
- 關(guān)鍵是TextField交替獲取焦點,當(dāng)TextField - A獲取焦點,進(jìn)行一番編輯之后,用戶手動關(guān)閉了軟鍵盤,這個時候FocusScop.of(context).requestFocus(focusNodeA)是無法喚起鍵盤的,所以需要另一個TextField-B來請求焦點,
- showAndroidKeyboard()是為了在某些情況下備用focusNode也沒獲取焦點,需要我們手動喚起焦點
- 隱藏鍵盤的事件還沒有很好的解決方案
bool refocus = data['refocus'] as bool;
if (_focusNode2.hasFocus) {
if (!refocus) FocusScope.of(context).requestFocus(_focusNode1);
//FocusScope.of(context).requestFocus(_focusNode);
if (!_focusNode1.hasFocus) {
//hideAndroidKeyboard();
showAndroidKeyboard();
}
//把初始文本設(shè)置給隱藏TextField
String initText = data['initText'];
var selectionStart = data['selectionStart'];
var selectionEnd = data['selectionEnd'];
int end = initText.length;
int start = initText.length;
if (selectionEnd is int) {
end = selectionEnd;
}
if (selectionStart is int) {
start = selectionEnd;
}
print(selectionEnd);
textController1.value = TextEditingValue(
text: initText,
selection: TextSelection(baseOffset: start, extentOffset: end),
);
//TextField請求顯示鍵盤
FocusScope.of(context).requestFocus(_focusNode1);
} else {
if (!refocus) FocusScope.of(context).requestFocus(_focusNode2);
//FocusScope.of(context).requestFocus(_focusNode);
if (!_focusNode2.hasFocus) {
//hideAndroidKeyboard();
showAndroidKeyboard();
}
//把初始文本設(shè)置給隱藏TextField
String initText = data['initText'];
var selectionStart = data['selectionStart'];
var selectionEnd = data['selectionEnd'];
int end = initText.length;
int start = initText.length;
if (selectionEnd is int) {
end = selectionEnd;
}
if (selectionStart is int) {
start = selectionEnd;
}
print(selectionEnd);
textController2.value = TextEditingValue(
text: initText,
selection: TextSelection(baseOffset: start, extentOffset: end),
);
//TextField請求顯示鍵盤
FocusScope.of(context).requestFocus(_focusNode2);
}
webview后面隱藏的TextField
return Stack(
children: <Widget>[
TextField(
autofocus: false,
focusNode: _focusNode1,
controller: textController1,
onChanged: (text) {
controller.evaluateJavascript('''
if(current != null){
current.value = '${textController1.text}';
current.selectionStart = ${textController1.selection.start};
current.selectionEnd = ${textController1.selection.end};
current.dispatchEvent(new Event('input'));
}
''');
},
onSubmitted: (text) {
controller.evaluateJavascript('''
if(current != null)
current.submit();
''');
_focusNode1.unfocus();
},
),
TextField(
autofocus: false,
focusNode: _focusNode2,
controller: textController2,
onChanged: (text) {
controller.evaluateJavascript('''
if(current != null){
current.value = '${textController2.text}';
current.selectionStart = ${textController2.selection.start};
current.selectionEnd = ${textController2.selection.end};
current.dispatchEvent(new Event('input'));
}
''');
},
onSubmitted: (text) {
controller.evaluateJavascript('''
if(current != null)
current.submit();
''');
_focusNode2.unfocus();
},
),
WebView(....)
]
);
- 在TextField的onChange中改編當(dāng)前focus的Element的text/selection,然后發(fā)送一個input事件來觸發(fā)Element改變
current.dispatchEvent(new Event('input'));,這里的大家應(yīng)該都很好理解了.
不得不說谷歌太坑了,webview竟然有這樣的大缺陷,不過也沒辦法畢竟版本號還沒到1.0.0呢…本文的方法只是一個臨時的解決方案,比如點擊空白隱藏軟鍵盤等功能還沒實現(xiàn),只使用一些簡單的文本輸入的webview還是可以的,還有一些input標(biāo)簽作為按鈕的可能還要手動隱藏下鍵盤,以上.
