移动web 怎么捕获虚拟键盘弹出和关闭事件
2024-04-28 00:47
1. 移动web 怎么捕获虚拟键盘弹出和关闭事件
1、当虚拟键盘弹出的时候，window的resize事件会被触发，问题里的input是使用position:fixed吗，如果是position: fixed，在resize触发时应该会自动调整位置吧。
2、以下js可以实现此效果：
var wHeight = windows.innerHeight; //获取初始可视窗口高度
$(window).resize(function() { //监测窗口大小的变化事件
var hh = windows.innerHeight; //当前可视窗口高度
var viewTop = $(window).scrollTop(); //可视窗口高度顶部距离网页顶部的距离
if(wHeight > hh){ //可以作为虚拟键盘弹出事件
$("body,html").animate({scrollTop:viewTop+100}); //调整可视页面的位置
}else{ //可以作为虚拟键盘关闭事件
$("body,html").animate({scrollTop:viewTop-100});
}
wHeight = hh;
});
2. js怎么听移动端键盘展开事件？
方法一实现代码:
var winHeight = $(window).height();
$(window).resize(function(){
var thisHeight=$(this).height();
if(winHeight - thisHeight >50){
//窗口发生改变(大),故此时键盘弹出
//当软键盘弹出，在这里面操作
}else{
//窗口发生改变(小),故此时键盘收起
//当软键盘收起，在此处操作
}
});
方法二:监控键盘。
监控的方式其实筛选下来也不过两种：
① 时钟setInterval不停监控
② 系统级别的监控，比如键盘出现时候通知window一个事件，但是很遗憾现在还没有这个事件，但是这个事件等于
input类元素获取焦点 == 弹出虚拟键盘
input类元素失去焦点 == 收起虚拟键盘
基于系统监控这点，我们还可以监控resize事件或者scroll事件，但是经过我的测试。
setInterval表现比较好.于是，我们简单写一段代码，可靠是否满足需求：
window.alert = function (msg) {
$('body').append('' + msg + '')
};
function fixedWatch(el) {
if(document.activeElement.nodeName == 'INPUT'){
el.css('position', 'static');
} else {
el.css('position', 'fixed');
}
}
setInterval(function () {
fixedWatch($('#headerview header'));
}, 500);
3. 移动web js如何实现弹出虚拟键盘
在文本框获取光标焦点之后，会自动弹出
4. javascript获取软键盘弹起&收回事件
当软键盘弹起触发resize时，屏幕的宽度不变，高度缩小； 而当旋转屏幕触发resize时，屏幕的宽和高是互换的，但数值不变。 根据这个特征就能区分resize是被何种事件触发的了。
5. 移动端 浏览器 关闭事件如何监听？
移动端不支持这两个事件。 如果你是想在用户离开前做引导提示，那么目前没有解决方案。 BTW，window 对象本身也有 onblur、onfocus 事件可以监听浏览器是否被切出、切入，但并不能取消掉该操作本身。
6. 如何监听软键盘的弹出和退出
Android是一个针对触摸屏专门设计的操作系统，当点击编辑框，系统自动为用户弹出软键盘，以便用户进行输入。
那么，弹出软键盘后必然会造成原有布局高度的减少，那么系统应该如何来处理布局的减少？我们能否在应用程序中进行自定义的控制？这些是本文要讨论的重点。
一、软键盘显示的原理
软件盘的本质是什么？软键盘其实是一个Dialog！
InputMethodService为我们的输入法创建了一个Dialog，并且将该Dialog的Window的某些参数（如Gravity）进行了设置，使之能够在底部或者全屏显示。当我们点击输入框时，系统对活动主窗口进行调整，从而为输入法腾出相应的空间，然后将该Dialog显示在底部，或者全屏显示。
二、活动主窗口调整
android定义了一个属性，名字为windowSoftInputMode, 用它可以让程序可以控制活动主窗口调整的方式。我们可以在AndroidManifet.xml中对Activity进行设置。如：android:windowSoftInputMode="stateUnchanged|adjustPan"
该属性可选的值有两部分，一部分为软键盘的状态控制，另一部分是活动主窗口的调整。前一部分本文不做讨论，请读者自行查阅android文档。
模式一，压缩模式
windowSoftInputMode的值如果设置为adjustResize，那么该Activity主窗口总是被调整大小以便留出软键盘的空间。
我们通过一段代码来测试一下，当我们设置了该属性后，弹出输入法时，系统做了什么。
重写Layout布局：
1. public class ResizeLayout extends LinearLayout{
2. private static int count = 0;
3.
4. public ResizeLayout(Context context, AttributeSet attrs) {
5. super(context, attrs);
6. }
7.
8. @Override
9. protected void onSizeChanged(int w, int h, int oldw, int oldh) {
10. super.onSizeChanged(w, h, oldw, oldh);
11.
12. Log.e("onSizeChanged " + count++, "=>onResize called! w="+w + ",h="+h+",oldw="+oldw+",oldh="+oldh);
13. }
14.
15. @Override
16. protected void onLayout(boolean changed, int l, int t, int r, int b) {
17. super.onLayout(changed, l, t, r, b);
18. Log.e("onLayout " + count++, "=>OnLayout called! l=" + l + ", t=" + t + ",r=" + r + ",b="+b);
19. }
20.
21. @Override
22. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
23. super.onMeasure(widthMeasureSpec, heightMeasureSpec);
24.
25. Log.e("onMeasure " + count++, "=>onMeasure called! widthMeasureSpec=" + widthMeasureSpec + ", heightMeasureSpec=" + heightMeasureSpec);
26. }
我们的布局设置为：
1. <com.winuxxan.inputMethodTest.ResizeLayout
2. xmlns:android="http://schemas.android.com/apk/res/android"
3. android:id="@+id/root_layout"
4. android:layout_width="fill_parent"
5. android:layout_height="fill_parent"
6. android:orientation="vertical"
7. >
8.
9. <EditText
10. android:layout_width="fill_parent"
11. android:layout_height="wrap_content"
12. />
13.
14. <LinearLayout
15. android:id="@+id/bottom_layout"
16. android:layout_width="fill_parent"
17. android:layout_height="fill_parent"
18. android:orientation="vertical"
19. android:gravity="bottom">s
20.
21. <TextView
22. android:layout_width="fill_parent"
23. android:layout_height="wrap_content"
24. android:text="@string/hello"
25. android:background="#77777777"
26. />
27.
28.
AndroidManifest.xml的Activity设置属性：android:windowSoftInputMode = "adjustResize"
运行程序，点击文本框，查看调试信息：
E/onMeasure 6(7960): =>onMeasure called! widthMeasureSpec=1073742144, heightMeasureSpec = 1073742024
E/onMeasure 7(7960): =>onMeasure called! widthMeasureSpec=1073742144, heightMeasureSpec = 1073742025
E/onSizeChanged 8(7960): =>onSizeChanged called! w=320,h=201,oldw=320,oldh=377
E/onLayout 9(7960): =>OnLayout called! l=0, t=0,r=320,b=201
从调试结果我们可以看出，当我们点击文本框后，根布局调用了onMeasure，onSizeChanged和onLayout。
实际上，当设置为adjustResize后，软键盘弹出时，要对主窗口布局重新进行measure和layout，而在layout时，发现窗口的大小发生的变化，因此调用了onSizeChanged。
从下图的运行结果我们也可以看出，原本在下方的TextView被顶到了输入法的上方。
模式二，平移模式
windowSoftInputMode的值如果设置为adjustPan，那么该Activity主窗口并不调整屏幕的大小以便留出软键盘的空间。相反，当前窗口的内容将自动移动以便当前焦点从不被键盘覆盖和用户能总是看到输入内容的部分。这个通常是不期望比调整大小，因为用户可能关闭软键盘以便获得与被覆盖内容的交互操作。
上面的例子中，我们将AndroidManifest.xml的属性进行更改：android: windowSoftInputMode = "adjustPan"
重新运行，并点击文本框，查看调试信息：
E/onMeasure 6(8378): =>onMeasure called! widthMeasureSpec=1073742144, heightMeasureSpec=1073742200
E/onMeasure 7(8378): =>onMeasure called! widthMeasureSpec=1073742144, heightMeasureSpec=1073742201
E/onLayout 8(8378): =>OnLayout called! l=0, t=0,r=320,b=377
我们看到：系统也重新进行了measrue和layout，但是我们发现，layout过程中onSizeChanged并没有调用，这说明输入法弹出前后并没有改变原有布局的大小。
从下图的运行结果我们可以看到，下方的TextView并没有被顶到输入法上方。
事实上，当输入框不会被遮挡时，该模式没有对布局进行调整，然而当输入框将要被遮挡时，窗口就会进行平移。也就是说，该模式始终是保持输入框为可见。如下图，整个窗口，包括标题栏均被上移，以保证文本框可见。
模式三 自动模式
当属性windowSoftInputMode被设置为adjustUspecified时，它不被指定是否该Activity主窗口调整大小以便留出软键盘的空间，或是否窗口上的内容得到屏幕上当前的焦点是可见的。系统将自动选择这些模式中一种主要依赖于是否窗口的内容有任何布局视图能够滚动他们的内容。如果有这样的一个视图，这个窗口将调整大小，这样的假设可以使滚动窗口的内容在一个较小的区域中可见的。这个是主窗口默认的行为设置。
也就是说，系统自动决定是采用平移模式还是压缩模式，决定因素在于内容是否可以滚动。
三、侦听软键盘的显示隐藏
有时候，借助系统本身的机制来实现主窗口的调整并非我们想要的结果，我们可能希望在软键盘显示隐藏的时候，手动的对布局进行修改，以便使软键盘弹出时更加美观。这时就需要对软键盘的显示隐藏进行侦听。
直接对软键盘的显示隐藏侦听的方法本人没有找到，如果哪位找到的方法请务必告诉本人一声。还有本方法针对压缩模式，平移模式不一定有效。
我们可以借助软键盘显示和隐藏时，对主窗口进行了重新布局这个特性来进行侦听。如果我们设置的模式为压缩模式，那么我们可以对布局的onSizeChanged函数进行跟踪，如果为平移模式，那么该函数可能不会被调用。
我们可以重写根布局，因为根布局的高度一般情况下是不发生变化的。
假设跟布局为线性布局，模式为压缩模式，我们写一个例子，当输入法弹出时隐藏某个view，输入法隐藏时显示某个view。
1. public class ResizeLayout extends LinearLayout{
2. private OnResizeListener mListener;
3.
4. public interface OnResizeListener {
5. void OnResize(int w, int h, int oldw, int oldh);
6. }
7.
8. public void setOnResizeListener(OnResizeListener l) {
9. mListener = l;
10. }
11.
12. public ResizeLayout(Context context, AttributeSet attrs) {
13. super(context, attrs);
14. }
15.
16. @Override
17. protected void onSizeChanged(int w, int h, int oldw, int oldh) {
18. super.onSizeChanged(w, h, oldw, oldh);
19.
20. if (mListener != null) {
21. mListener.OnResize(w, h, oldw, oldh);
22. }
23. }
24. }
在我们的Activity中，通过如下方法调用：
1. public class InputMethodTestActivity extends Activity {
2. private static final int BIGGER = 1;
3. private static final int SMALLER = 2;
4. private static final int MSG_RESIZE = 1;
5.
6. private static final int HEIGHT_THREADHOLD = 30;
7.
8. class InputHandler extends Handler {
9. @Override
10. public void handleMessage(Message msg) {
11. switch (msg.what) {
12. case MSG_RESIZE: {
13. if (msg.arg1 == BIGGER) {
14. findViewById(R.id.bottom_layout).setVisibility(View.VISIBLE);
15. } else {
16. findViewById(R.id.bottom_layout).setVisibility(View.GONE);
17. }
18. }
19. break;
20.
21. default:
22. break;
23. }
24. super.handleMessage(msg);
25. }
26. }
27.
28. private InputHandler mHandler = new InputHandler();
29.
30. /** Called when the activity is first created. */
31. @Override
32. public void onCreate(Bundle savedInstanceState) {
33. super.onCreate(savedInstanceState);
34. setContentView(R.layout.main);
35.
36. ResizeLayout layout = (ResizeLayout) findViewById(R.id.root_layout);
37. layout.setOnResizeListener(new ResizeLayout.OnResizeListener() {
38.
39. public void OnResize(int w, int h, int oldw, int oldh) {
40. int change = BIGGER;
41. if (h < oldh) {
42. change = SMALLER;
43. }
44.
45. Message msg = new Message();
46. msg.what = 1;
47. msg.arg1 = change;
48. mHandler.sendMessage(msg);
49. }
50. });
51. }
52. }
这里特别需要注意的是，不能直接在OnResizeListener中对要改变的View进行更改，因为OnSizeChanged函数实际上是运行在 View的layout方法中，如果直接在onSizeChange中改变view的显示属性，那么很可能需要重新调用layout方法才能显示正确。然而我们的方法又是在layout中调用的，因此会出现错误。因此我们在例子中采用了Handler的方法。
7. 如何利用input事件来监听移动端的输入
如何利用input事件来监听移动端的输入 onchange事件就行了。（安卓此时需要点击确定按钮才会触发，iOS则每改变一个日期，不需要点击确定都会触发。） 可以设置范围，具体参考该链接 HTML DOM Input Date Object 中的 Input Date Object Properties 部分对 max 和 min 属性的描述。 那个是输入法的问题吧~搜狗遇到那种输入框应该会自动带了一个搜索键，不是用JS写的，当然你要写也可以，去查一下那个搜索键的ASCII码，然后用onkeydown事件去触发就行了~（不知道不同输入法的搜索键的ASCII码是否一样~）
8. 如何捕捉移动端程序切换事件
当虚拟键盘弹出的时候，window的resize事件会被触发（至少我的Android手机是这样）
最新文章
热门文章
推荐阅读