`
Dream丶AL
  • 浏览: 22192 次
  • 性别: Icon_minigender_1
文章分类
社区版块
存档分类
最新评论

JS点击其他位置关闭手机弹出的小键盘

 
阅读更多

思路是这样的,点击其他位置,让输入框的焦点消失,输入框自然就消失。

使输入框失去焦点的JS如下

function close_keyboard(){
     document.activeElement.blur('input_id');
}

 在IOS系统中不识别onclick事件,所以用其他三中方法。

当摁下手指时,触发ontouchstart;

当移动手指时,触发ontouchmove;

当移走手指时,触发ontouchend;

 

在大的div里设置一个触摸函数,点击时就可以关闭小键盘了。

分享到:
评论

相关推荐

    原生js代码点击文字或小图弹出层_点按钮关闭弹出层特效

    本主题聚焦于一个常见的功能实现:使用原生JavaScript实现点击文字或小图时弹出层的效果,并通过点击特定按钮关闭这个弹出层。这个功能在网页设计中十分常见,例如在显示详细信息、弹窗提示或者图片预览等场景。 ...

    点击弹出小窗口

    在IT行业中,"点击弹出小窗口"是一个常见的交互设计技术,主要应用于网页或桌面应用程序,为用户提供一种轻量级的交互方式。这种技术通常涉及到前端开发中的JavaScript、HTML和CSS,以及可能的库和框架如jQuery或Vue...

    jQuery手机端数字键盘底部弹出代码.zip

    这个"jQuery手机端数字键盘底部弹出代码.zip"提供的就是一个这样的解决方案,它是一个JavaScript特效,用于在手机浏览器中弹出一个带有加减号、退出、退格、清除和确定提交功能的数字键盘。 1. **jQuery库**: ...

    jQuery手机端点击弹出分享按钮代码.zip

    【jQuery手机端点击弹出分享按钮代码】是一个适用于移动设备的JavaScript实现,它利用了jQuery库和CSS3技术,为用户提供了一个优雅的方式来显示分享按钮。这个功能在当今的移动应用和网页设计中非常常见,因为它使得...

    jQuery底部弹出虚拟键盘代码.zip

    【jQuery底部弹出虚拟键盘代码.zip】是一个包含JavaScript特效的资源包,主要目的是为了解决在触屏设备上,如手机或平板电脑,用户在输入框内输入时无法使用物理键盘的问题。这个代码利用jQuery库实现了一个底部弹出...

    js弹出窗口、弹出层

    6. **交互性**:支持键盘操作,如Esc键关闭弹出层,以及焦点管理,确保表单元素可访问。 7. **响应式设计**:适应不同设备和屏幕尺寸,保证在移动设备上的良好显示。 实现弹出层的JavaScript库有很多,比如jQuery ...

    JavaScript弹出层

    Js弹出层库则是专门为此目的设计的JavaScript库,简化了弹出层的创建和管理过程。在这个场景中,我们关注的是名为"Dialog"的压缩包文件,很可能包含了一个对话框实现的库或者相关的代码示例。 弹出层通常分为几种...

    18种非常实用的js弹出层

    6. **关闭机制**:除了点击弹出层外,还可以设置其他关闭机制,如点击遮罩层、按下Esc键或设置定时自动关闭。 7. **自定义功能**:弹出层可以包含表单、图片、视频等多样化内容,还可以添加确认、取消按钮,处理...

    JS动态弹出框,动态效果,lightbox2.3

    Lightbox 弹出框会在用户点击图片链接时,以半透明背景覆盖整个页面,并在中心位置放大显示选中的图片,同时提供关闭按钮和其他导航选项。 Lightbox2.3 的核心功能包括: 1. **图片缩放**:当用户点击图片链接时,...

    简单精美js弹出层效果

    利用媒体查询(Media Queries)调整弹出层的大小和位置,确保在手机、平板和桌面电脑上都能正常显示。 6. **兼容性测试**:最后,要确保所编写的JavaScript代码在主流浏览器(如Chrome、Firefox、Safari、Edge等)...

    js弹出层 下载直接用

    同时,可能还需要处理关闭弹出层的逻辑,例如点击遮罩层或再次点击触发按钮。 2. **HTML 结构**:`demo.html`中,弹出层通常包含一个主容器(可能带有透明遮罩),以及弹出内容区域。内容可以是任何HTML元素,如...

    jQuery点击输入框弹出软键盘输密码特效.zip

    在网页开发中,为了提高用户体验,尤其是对于移动设备用户,实现点击输入框自动弹出软键盘输入密码的特效显得尤为重要。这一功能通常由jQuery库配合JavaScript实现,既方便又高效。本篇文章将详细解析这个特效的实现...

    使用html+css+js实现自定义弹出对话框/输入框

    在实现弹出对话框时,我们需要创建一个包含对话框元素的容器,例如`<div>`,并设置相应的ID或类名以便于CSS和JavaScript操作。例如: ```html 自定义对话框 请输入内容"> 关闭 ``` 接着,CSS(Cascading ...

    JavaScript手机端右侧响应式弹出菜单demo

    在JavaScript手机端右侧响应式弹出菜单的开发中,我们需要关注几个关键知识点,这些知识点将构建一个用户友好、适应不同屏幕尺寸的交互式菜单。在本文中,我们将深入探讨JavaScript、ECMAScript、前端开发以及如何...

    JS弹出层大集合。很多好用的JS弹出层代码

    JavaScript(简称JS)弹出层是一种常见的网页交互设计,它可以在用户与网页交互时弹出一个浮动窗口,显示额外的信息、提示或者进行某些操作。在网页开发中,弹出层通常用于实现模态对话框、警告提示、信息确认、表单...

    js弹出层大集合里面有很多

    通过学习和研究这些示例,你可以了解到更多的细节和技巧,比如如何调整弹出层的位置以适应屏幕大小变化,如何处理键盘事件以支持键盘操作,以及如何实现更复杂的交互逻辑。 总的来说,JavaScript弹出层是一个广泛...

    javascript弹出层并锁屏

    此外,还可以添加键盘事件监听,使得用户可以通过按下Esc键关闭弹出层和解锁屏幕: ```javascript document.addEventListener('keydown', function(event) { if (event.key === 'Escape') { hidePopupWithUnlock...

    纯js点击按钮弹出登录对话框特效

    总的来说,实现“纯js点击按钮弹出登录对话框特效”需要掌握JavaScript事件处理、DOM操作、CSS样式以及可能的第三方库如jQuery UI中的拖动功能。这个特效在实际网页开发中非常实用,能提升网站的专业感和用户体验。...

    js弹出层可拖动兼容各大浏览器

    此外,还可以添加键盘操作的支持,例如通过按下ESC键关闭弹出层。 总结来说,"js弹出层可拖动兼容各大浏览器"涉及了JavaScript事件处理、DOM操作、CSS样式兼容、响应式设计以及用户交互优化等多个方面。通过掌握...

Global site tag (gtag.js) - Google Analytics