键盘隐藏在Android的WebView输入字段 [英] Keyboard hides input fields on Android WebView
本文介绍了键盘隐藏在Android的WebView输入字段的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在我的Android应用我有差不多的WebView元素的布局一个活动。在这种的WebView我加载在线表格供用户填写。然而，底部输入字段（文本框）留在软键盘的后面和用户不能够填写出来。
什么是这种情况可能的解决方案？
下面是我的code：
AndroidManifest.xml中（这部分布局只）
＆LT;活动
机器人：home.SurveyActivityNAME =
机器人：configChanges =方向
机器人：图标=@绘制/ logo_white
机器人：screenOrientation =画像
机器人：windowSoftInputMode =adjustResize＆GT; ＆LT; /活性GT;
布局文件：
＆LT; RelativeLayout的
的xmlns：机器人=http://schemas.android.com/apk/res/android
机器人：layout_width =match_parent
机器人：layout_height =match_parent＆GT; ＆LT;的FrameLayout
机器人：ID =@ + ID / custom_header
风格=@风格/ CustomHeader.Height
机器人：layout_alignParentTop =真/＆GT; ＆LT;的WebView
机器人：ID =@ + ID / activity_portal_webview
机器人：layout_width =match_parent
机器人：layout_height =match_parent
机器人：layout_above =@ + ID / activity_portal_bottom_layout
机器人：layout_below =@ ID / custom_header
机器人：滚动条=无/＆GT; ＆LT;的LinearLayout
机器人：ID =@ ID / activity_portal_bottom_layout
机器人：layout_width =match_parent
机器人：layout_height =WRAP_CONTENT
机器人：layout_alignParentBottom =真
机器人：方向=垂直＆GT; ＆LT; / LinearLayout中＆GT;＆LT; / RelativeLayout的＆GT;
活动类：
公共类SurveyActivity延伸活动{ 公共静态意图makeIntent（上下文的背景下）{
返回新意图（背景下，SurveyActivity.class）;
} @燮pressLint（SetJavaScriptEnabled）
@覆盖
保护无效的onCreate（捆绑savedInstanceState）{
super.onCreate（savedInstanceState）;
Utils.updateLang（）; 的setContentView（R.layout.survey_activity_main）; Utils.inflateCustomHeader（本）; web视图的WebView =（的WebView）findViewById（R.id.activity_portal_webview）; webView.setWebChromeClient（新WebChromeClient（））; WebSettings webSettings = webView.getSettings（）;
webSettings.setLoadsImagesAutomatically（真）;
webSettings.setDomStorageEnabled（真）;
webSettings.setJavaScriptEnabled（真）;
webSettings.setDefaultTextEncodingName（UTF-8）; webView.loadUrl（WWW.EXAMPLE.COM）;
} @覆盖
保护无效onResume（）{
super.onResume（）;
Utils.updateLang（）; 的LinearLayout导航栏=（的LinearLayout）findViewById（R.id.activity_portal_bottom_layout）;
navigationBar.removeAllViews（）;
navigationBar.addView（NavigationBarContract.makeNavigationBar（这一点，R.id.navigation_bar_home_button））;
}
}
解决方案
我不知道如果这有助于但是我的解决办法是一些JavaScript添加到网页视图处理进行调整。
首先你需要两个JavaScript函数，我打电话给我noFocus而移动身体恢复到0位置。
函数noFocus（）{
的console.log（'无焦点的'）;
Android.resetWindow（）; //这通过一个接口删除naigation和状态栏
$（身体）的CSS（保证金顶，0像素）。
}
另一个叫hasFocus的天气决定移动身体或不
函数hasFocus（）{
VAR boxHeight = $（本）.offset（）最高+60。
变种windowHei = $（窗口）.height（）;
变种DTOP = boxHeight - （windowHei / 2）;
//这个逻辑可能需要根据您的实现改变
的console.log（'六书+ DTOP +作为boxheight是 - ＆GT;'+ boxHeight +'windowHei - ＆GT;'+ windowHei）
如果（boxHeight＆GT;（windowHei / 2））{
$（身体）的CSS（保证金顶，-dTop +PX）;
}
this.addEventListener（'模糊'，noFocus，FALSE）;
}
这时就需要通过DOM遍历加入下面输入监听器
VAR输入= document.querySelectorAll（'输入'）;
对于（VAR I = 0; I＆LT; input.length;我++）{
输入[I] .removeEventListener（'专注'，hasFocus，FALSE）
输入[I]阅读进度（'专注'，hasFocus，FALSE）
};
用我的方法，唯一的限制是，如果键盘被驳回那么noFocus不叫，直到用户触摸的输入域之外。
On my Android app I have an Activity with a layout of almost WebView element. In this WebView I am loading online form for the user to fill out. However, bottom input fields (Text boxes) stay behind the soft keyboard and the user is not able to fill them out.
What are possible solutions for this situation?
Here is my code:
AndroidManifest.xml (this layouts part only)
<activity
android:name=".home.SurveyActivity"
android:configChanges="orientation"
android:icon="@drawable/logo_white"
android:screenOrientation="portrait"
android:windowSoftInputMode="adjustResize">
</activity>
Layout file:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/custom_header"
style="@style/CustomHeader.Height"
android:layout_alignParentTop="true"/>
<WebView
android:id="@+id/activity_portal_webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/activity_portal_bottom_layout"
android:layout_below="@id/custom_header"
android:scrollbars="none"/>
<LinearLayout
android:id="@id/activity_portal_bottom_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
</LinearLayout>
</RelativeLayout>
Activity class:
public class SurveyActivity extends Activity {
public static Intent makeIntent(Context context) {
return new Intent(context, SurveyActivity.class);
}
@SuppressLint("SetJavaScriptEnabled")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Utils.updateLang();
setContentView(R.layout.survey_activity_main);
Utils.inflateCustomHeader(this);
WebView webView = (WebView) findViewById(R.id.activity_portal_webview);
webView.setWebChromeClient(new WebChromeClient());
WebSettings webSettings = webView.getSettings();
webSettings.setLoadsImagesAutomatically(true);
webSettings.setDomStorageEnabled(true);
webSettings.setJavaScriptEnabled(true);
webSettings.setDefaultTextEncodingName("UTF-8");
webView.loadUrl("WWW.EXAMPLE.COM");
}
@Override
protected void onResume() {
super.onResume();
Utils.updateLang();
LinearLayout navigationBar = (LinearLayout) findViewById(R.id.activity_portal_bottom_layout);
navigationBar.removeAllViews();
navigationBar.addView(NavigationBarContract.makeNavigationBar(this, R.id.navigation_bar_home_button));
}
}
解决方案
I am not sure if this helps but my solution was to add some javascript to the webview to handle the resizing.
first you need two javascript functions, I called mine noFocus which moves the body back to the 0 position.
function noFocus() {
console.log('unfocus');
Android.resetWindow(); // this removes the naigation and status bar via an interface
$('body').css("margin-top", "0px");
}
another called hasFocus that decides weather to move the body up or not
function hasFocus(){
var boxHeight = $(this).offset().top +60;
var windowHei = $(window).height();
var dTop = boxHeight - (windowHei/2);
// this logic may need to change depending on your implementation
console.log('dtop' + dTop + ' as boxheight is ->' + boxHeight + 'windowHei ->' + windowHei )
if(boxHeight > (windowHei/2)) {
$('body').css("margin-top", -dTop + "px");
}
this.addEventListener('blur', noFocus, false);
}
then you need to iterate through the DOM adding the below input listeners
var input = document.querySelectorAll('input');
for (var i = 0; i < input.length; i++) {
input[i].removeEventListener('focus', hasFocus, false)
input[i].addEventListener('focus', hasFocus, false)
};
the only limitation with my approach is if the keyboard is dismissed then the noFocus is not called until the user touches outside the input field.
这篇关于键盘隐藏在Android的WebView输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
