iOS webview html5 移动端 软键盘弹起遮挡输入框

html-css05

iOS webview html5 移动端 软键盘弹起遮挡输入框,第1张

移动web聊天页面,输入框在底部的时候,点击输入,弹起软键盘,iOS在将页面推上的时候会回弹一下,导致键盘刚好遮挡到输入框。

初次触发输入框的focus的时候,iOS 键盘默认是以英文键盘高度推上页面,但一般我们的默认输入是中文,会导致软键盘的高度变化,中文输入键盘高度高于英文,所以导致了遮挡。

Element.scrollIntoViewIfNeeded() 方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。 如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动。 此方法是标准的 Element.scrollIntoView() 方法的专有变体。

当键盘在切换中英输入法时,键盘高度变化仍然会引起键盘遮挡

监听输入框的 focus 、 blur 事件,当聚焦时,循环调用 input.scrollIntoViewIfNeeded 方法。

当监听到 blur 时,停止循环。

今天要做一个搜索功能,搜索界面采用AutoCompleteTextView做搜索条,然后下面用listview来显示搜索结果,而我的主界面是在底部用tab做了一个主界面导航,其中有一个搜索按钮,因为在搜索条中输入文字的时候会弹出软件盘,但是如果不做什么设置的话,软键盘弹出来的同时,会把我下面的tab导航给相应拉到屏幕的上面,界面显示的扭曲啊,后来找到一种解决方法,在相应的activity中(比如我这是tab的activity,用的是adjustpan)添加android:windowSoftInputMode这个属性,下面详细说下这个属性:&X!Q6c9}%i.]6@0Y"N6^d{"XwindowSoftInputMode属性设置值说明。attributes:android:windowSoftInputMode活动的主窗口如何与包含屏幕上的软键盘窗口交互。这个属性的设置将会影响两件事情7S7U+S!p7s(U)n:t:m&N:1>软键盘的状态——是否它是隐藏或显示——当活动5w$r-U9i"h.O'M"M(Activity)成为用户关注的焦点。2>活动的主窗口调整——是否减少活动主窗口大小以便腾出空间放软键盘或是否当活动窗口的部分被软键盘覆盖时它的内容的当前焦点是可见的。它的设置必须是下面列表中的一个值,或一个”state…”值加一个+s.Z"m5u:{kB7v4Q”adjust…”值的组合。在任一组设置多个值——多个”state…”values,例如&mdash有未定义的结果。各个值之间用+H8v$Q#~5f3B&`-G8c$y|分开。例如:在这设置的值8A:N!L'x0`:C(除'H0N"g,w2W)KF#y2l!c"stateUnspecified"和"adjustUnspecified"以外3^,p2EG:I2y/V)将覆盖在主题中设置的值将覆盖在主题中设置的值

给输入框放在html这层,然后给html相对定位,height:100%width:100%,再给输入框绝对定位到bottom:0left:0这时候输入框在键盘弹出的时候会跳到输入框的上面。