开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js 监听键盘收起

在JavaScript中，监听键盘收起（即虚拟键盘在移动设备上关闭）的事件并没有一个直接的标准事件可以监听。通常，我们可以通过监听窗口尺寸的变化或者特定元素的聚焦状态来间接判断键盘的收起。

以下是一些常见的方法：

方法一：监听窗口尺寸变化

当虚拟键盘弹出时，浏览器窗口的高度会发生变化。我们可以通过监听resize事件来判断键盘是否收起。

let initialHeight = window.innerHeight;

window.addEventListener('resize', () => {
  let currentHeight = window.innerHeight;
  if (currentHeight > initialHeight) {
    // 键盘收起
    console.log('键盘已收起');
    initialHeight = currentHeight; // 更新初始高度
  } else {
    // 键盘弹出或尺寸未变化
    initialHeight = currentHeight;
  }
});

方法二：监听输入框的聚焦状态

我们还可以通过监听输入框的blur事件来判断键盘是否收起。当输入框失去焦点时，通常意味着键盘已经收起。

const inputElement = document.querySelector('input');

inputElement.addEventListener('blur', () => {
  console.log('键盘已收起');
});

方法三：使用定时器轮询

如果上述方法不够准确，还可以使用定时器轮询窗口尺寸或输入框状态。

let initialHeight = window.innerHeight;
let timer = setInterval(() => {
  let currentHeight = window.innerHeight;
  if (currentHeight > initialHeight) {
    console.log('键盘已收起');
    clearInterval(timer);
    initialHeight = currentHeight;
  }
}, 100); // 每100毫秒检查一次

注意事项

性能考虑：频繁监听窗口尺寸变化或使用定时器可能会影响性能，应谨慎使用。
兼容性：不同浏览器和设备对虚拟键盘的处理可能有所不同，测试时应覆盖多种环境。
用户体验：在键盘收起时，可能需要执行一些操作（如滚动页面到原始位置），应确保这些操作不会干扰用户。

应用场景

表单提交：在用户完成输入后，自动提交表单。
页面滚动：在键盘收起时，自动滚动页面到用户之前浏览的位置。
界面调整：根据键盘的状态调整页面布局，提升用户体验。

通过上述方法，可以在一定程度上实现对键盘收起事件的监听和处理。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JS实现键盘监听

本文链接：https://ligang.blog.csdn.net/article/details/44467477 项目中要监听键盘组合键CTRL+C，以便做出对应的响应。...> js.../jquery-1.8.0.min.js?...ctrlKey属性可结合鼠标或键盘使用，多用于制作一些快捷操作方式。...88 6 54 G 71 P 80 Y 89 7 55 H 72 Q 81 Z 90 8 56 I 73 R 82 0 48 9 57 数字键盘上的键的键码值

7.1K3 1

JS监听键盘按键

{ alert("你按下了ctrl+V"); } }; js...键盘事件对应的键码： keyCode 8 = BackSpace BackSpace keyCode 9 = Tab Tab keyCode 12 = Clear keyCode 13 = Enter

6.9K1 0

ios学习——键盘的收起

在开发过程中，我们经常会用到UITextField、UITextView等文本框，然后这些文本框在点击之后会自动成为第一响应者（FirstResponder），并自动弹出软键盘。...然而，没有自动定义好的软键盘的回收。今天，我在开发过程中就遇到了这个问题，首先，软键盘收起会发生在两种情况下，一是当前区域为非第一响应者，二是当前区域的输入结束。...当点击事件发生在非选中区域时，则键盘会自动回收： 1 //在viewDidLoad中添加点击手势，为了关闭键盘的操作 2 UITapGestureRecognizer *tap1 = [[UITapGestureRecognizer...2、利用键盘上的回车键来进行设置当前UITextField、UITextView等文本框不是第一响应者，这种方法对UITextField、UITextView的应用不一样，需要区别进行。　　...但是，我们可以根据UITextViewDelegate提供的方法对键盘输入的值进行判断，如果为回车键（\n）则设置当前UITextView不是第一响应者，否则不操作。

1.9K6 0

使用JS监听键盘按下事件

事件说明我们将键盘按下后事件的所有属性和方法打印出来（这里以按下1为例） document.onkeydown = function(event){ console.log(event)...document.onkeydown = function(event){ console.log("按下:"+event.key+"键:"+event.keyCode); } 按下任意按键后的效果：二、监听回车按下事件...这里以回车键（键码为13）为例，如果需要监听不同的按键，修改键码即可 document.onkeydown = function(event){ if(event.keyCode==13...){ // 事件 console.log("按下了回车键") } } 三、监听组合键这里以CTRL+A为例 altKey：按下Alt+*组合键时为true ctrlKey...按键键码 S 83 1 49 T 84 2 50 U 85 3 51 V 86 4 52 W 87 5 53 X 88 6 54 Y 89 7 55 Z 90 8 56 0 48 9 57 数字键盘上的键的键码值

11.5K1 0

touchesBegan: withEvent: 不执行完美收起键盘

touches withEvent:event]; } 应用场景：操作：点击ScrollView上的textFiledView -> 再点击ScrollView上的button 希望能够收起键盘

8553 0

【JS】310- 使用 focusout 事件，解决 iOS 键盘收起不归位问题

前端自习课”关注，学习起来~ 本文原载于 SegmentFault 专栏青檬前端作者：sheldon 整理编辑：SegmentFault 问题症状：今天在开发一个移动端的 H5 页面时，遇到了 iOS 上键盘收起时界面无法归位的问题...键盘收起时页面无法还原归位然而当用户输入完成关闭键盘后，键盘虽然收起了，但页面位置却不会还原。问题分析：实际上这是由于 iOS 无法在键盘收起时，页面滚出视口的部分没有掉下来导致的。...不过，无论是通过 Vue 的 @blur 还是通过 DOM 操作的方式添加，都要添加4个事件监听，不是很优雅。很自然，我们想到用事件代理。...事件代理：即，我们把事件监听放到顶部元素上；然后定义一个 inputBlur 的函数等待触发。...input') { window.scrollTo(0,0); } }, 这时，我们问题得到解决了，当从输入框输入内容，然后点击键盘的完成收起键盘

3.4K1 0

iOS 监听键盘

百度所查到的键盘监听大部分用的是 UIKeyboardDidShowNotification//已经显示 UIKeyboardDidHideNotification//已经隐藏然后我自己去试一直觉得一些空间跟随键盘的移动是有时间间隔的...addObserver:self selector:@selector(keyboardWasHidden:) name:UIKeyboardWillHideNotification object:nil]; } //键盘显示注册通知...UIView setAnimationCurve:[curve intValue]]; // 更改位置 _menuView.frame = containerFrame; }]; } //键盘消失通知

1.5K3 0

Python 键盘鼠标监听

第三方库： pyHook 下载地址 pythoncom /pywin32 下载地址 IDE： PyCharm 2016.2 pro API 基础 PyHook是一个基于Python的“钩子”库，主要用于监听当前电脑上鼠标和键盘的事件...HookManager.onKeyboardEvent + HookManager.HookKeyboard() 监听键盘事件，并且设置键盘钩子，同样这两个应该同时出现。...以便将事件传给其他的处理程序，如果返回False的话，鼠标事件在这里就会被拦截，即鼠标会僵在此处失去响应 return True def onKeyboardEvent(event): # 监听键盘事件...hm.KeyDown = onKeyboardEvent #设置键盘”钩子“ hm.HookKeyboard() # 监听鼠标事件 hm.mouseAll =...在判断键盘按下Q键的时候，停止键盘事件的记录。如果想彻底的停止程序的监听的话，需要调用win32api.PostQuitMessage().

3.2K1 0

python pynput监听键盘

1 """小白随笔，大佬勿喷""" 2 #键盘输入 3 from pynput.keyboard import Key,Controller,Listener 4 keyboard = Controller...keyboard.type("Hello World") #输出文字 12 13 #-------------------------------------------------- 14 15 # 键盘监听...,停止监视 22 def on_release(key): 23 if key == Key.enter: 24 print('you release Enter') 25 #监听键盘按键

3.1K3 0

JS控制展开与收起

我们可以让查询条件，先只展示一部分，当点击展开的时候，在展示其他的，如下图: 展开前：展开后：思路：使用js控制。需要隐藏的放在div里面，然后有js控制。...fa-refresh"> 重置 JS...代码： // 收缩展开效果 function show(){ $("#hiddenli").show(); $("#my_btn").html('收起↑'); document.getElementById

8.2K3 0

react 监听键盘事件 hook

current" in target) { return target.current; } return target; } /** * 按键是否激活 * @param event 键盘事件...) || keyCode == key) { genLen++; } } return genLen === keyCodeArr.length; }; /** * 键盘按下预处理方法...* @param event 键盘事件 * @param keyFilter 键码集 */ const genKeyFormate = (event: KeyboardEvent, keyFilter...array") { return keyFilter.some((item: keyFilter) => keyActivated(event, item)); } }; /** * 监听键盘按下... Element git：https://github.com/isxiaoxin/front_end_wheel/tree/master/hooks/useKeyPress 首发自：react 监听键盘事件

2.2K1 0

python实现简易键盘监听

VARCHAR(255), event_type VARCHAR(10), event_time DATETIME )''')conn.commit()#TODO 监听按下的行为...event_time) VALUES (%s, %s, %s) ''', (key_name, event_type, event_time)) conn.commit()#TODO 监听释放的行为...event_time)) conn.commit()keyboard.on_press(on_key_press)keyboard.on_release(on_key_release)#TODO 按下esc结束监听

671 1

在有TableView的页面一行代码收起键盘

https://blog.csdn.net/u010105969/article/details/76637614 相信有iOS开发经验的同学都知道如何收起键盘，可你知道吗，但一个页面有tableView...的时候，一行代码就可以让键盘收起（不用去点击页面然后取消UITextField或UITextView的第一响应者，也不用去监听tableView的滚动事件然后隐藏键盘）。

9032 0

键盘监听木马病毒原理

病毒表现键盘监听病毒在网吧中非常流行，它在启动后会监听用户的键盘输入事件，如果有人使用账号密码登录，那么他所按下的每一个键都会被记录下来，被发送给别有用心的人。...原理分析该病毒能够记录所有窗口的输入事件，因此基本可以确定是用了键盘钩子。钩子函数会在事件发生后第一时间收到通知并处理。这样无论用户输入了什么，病毒总能第一时间记录。...首先注册全局键盘钩子 keyHook = SetWindowsHookExA(WH_KEYBOARD_LL,keyProc,GetModuleHandle(NULL),NULL); 实现keyProc函数...s += (QChar)list[i]; } label->setText(s); Stop(); } } 效果展示启动之前启动监听并在其他窗口输入密码...因为该病毒没有出现在任何病毒库中，而且也没有进行任何高危操作，包括记录键盘也仅仅是使用了window自带的API而已。预防方法最好的方法就是不输密码，采用扫码登录。

1.7K1 0

JavaScript监听键盘点击事件

简述使用JavaScript监听网页中键盘按下的事件，方法很简单代码先添加网页监听事件，在网页内按需要知道 keyCode 的按键，比如说数字 1 就是 97 document.onkeydown...= function (event) { document.write(event.keyCode); } 然后判断 keyCode 是不是等于 97 就能实现监听键盘数字 1 的按下事件 document.onkeydown

2.1K2 0

js监听用户的键盘敲击事件，兼容各大主流浏览器

js监听用户的键盘敲击事件，兼容各大主流浏览器 document.onkeydown = function (event

4.2K1 0

JS键盘码

js 里面的键盘事件经常用到 172 如果要使用组合键，则可以判断是否同时按下了这几个键，比如ctrl键、shift键以及alt键的组合使用就可以判断是否多按下了ctrl键、shift键以及alt键

2.7K1 0

JS迷你键盘

JS迷你键盘以CSS书写样式，在底部添加了JS脚本作为驱动，实现与键盘交互式响应。JS代码比较精简，适合初学者练习、拓展，CSS较难，每一个按键都是好多个div拼凑的，CSS精通者可以尝试 ?...支持键盘点击事件，有响应效果如果你不曾学习过前端语言，又想将代码保存下来，留待将来学习和参悟，那么请点击 “ 这里 ” ，一遍就能学废。奇酷教学键盘 *{margin

2.5K4 0

js监听模式模拟事件监听

function Handle(){ this.events={}; this.addEventListener=functio...

19.4K3 0

js键盘事件以及键盘事件拦截

一.键盘事件 onkeydown: 按下键盘时触发 onkeypress: 按下有值的键时触发注意: onkeypress按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发对于有值的键...，按下时先触发 keydown 事件，再触发这个事件 onkeyup:松开键盘时触发该事件二.组合键 ctrl相关 alt相关 meta （Mac键盘是一个四瓣的小花，...Windows键盘是Windows键）相关 shift相关写一个举例其他都类似比如ctrl+c window.onkeydown=function (e) { if (e.ctrlKey

6.3K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭