前端常见兼容问题系列8: 安卓机器中通过JS设置焦点无法拉起软键盘

简介: 有时候,为了优化用户体验,做交互设计的同学可能会希望让输入框自动获得焦点并弹出软键盘,这样用户不用点击输入框就可以直接输入。的确,这对用户来说很方便。但真正用HTML5页面去实现的时候,却遇到了问题。 首先我做了这样一个demo。 ``` Title #input1{

有时候,为了优化用户体验,做交互设计的同学可能会希望让输入框自动获得焦点并弹出软键盘,这样用户不用点击输入框就可以直接输入。的确,这对用户来说很方便。但真正用HTML5页面去实现的时候,却遇到了问题。

首先我做了这样一个demo。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no, address=no, email=no, time=no">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
    <title>Title</title>
    <style>
        #input1{
            width: 200px;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <input id="input1" type="text">
    
    <script>
        document.getElementById('input1').focus();
    </script>
</body>
</html>

在iOS的机器上试验,可以实现需求。但在多台安卓机器上测试时,都发现无法拉起来软键盘。

接着我尝试了给input输入框加上autofocus属性、或者给 document.getElementById('input1').focus();加上延时执行,也都无效。

之后,我又尝试把<input id="input1" type="text">换成一个<div contenteditable="true" id="input1"></div>,再用JS控制它自动获得焦点,事实证明也是无效的。

最后找到一个可以部分解决问题的办法,就是通过一个按钮的click()方法去触发input框的focus()方法。代码清单如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no, address=no, email=no, time=no">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
    <title>Title</title>
    <style>
        #input1{
            width: 200px;
            line-height: 20px;
            border: 1px solid #b2b2b2;
            padding: 5px;
        }
    </style>
</head>
<body>
    <input id="input1" type="text">

    <button id="btn">focus</button>

    <script>
        var btn = document.getElementById('btn');

        btn.onclick = function () {
            document.getElementById('input1').focus();
        }
    </script>
</body>
</html>

这个办法可以解决在点击一个按钮,不跳转页面的情况下打开一个弹层,让弹层中的输入框自动获得焦点并拉起软键盘的问题。注意,这里的点击按钮事件是需要手动触发的。如果不手动点击按钮,则即便用JS去触发按钮点击事件,也是不能拉起软键盘的。至于点击按钮后跳转到一个新页面的场景,用这种办法也是无法cover到的。

最后,顺便提一下,有一个方法可以在进入页面时就通过JS拉起软键盘,那就是进入页面时自动执行window.propmt()这个JS语句。遗憾的是,由于window.propmt()弹出的界面不可定制,实在太不美观,因而使用场景非常之有限。

目录
相关文章
|
2天前
|
数据可视化 前端开发 JavaScript
前端框架与库-D3.js数据可视化基础
【7月更文挑战第21天】D3.js是Web开发中创建动态、交互图表的利器,适用于从基础条形图到复杂地理热力图的广泛需求。核心概念涉及数据绑定至DOM,支持动态更新。初学者常遇难题包括不当数据绑定、选择器误用、过渡动画过量及坐标轴配置失误。避免策略需善用`.data()`, `.enter().append()`, `.exit().remove()`管理数据,熟知选择器差异,适度应用`.transition()`, 并精准设定坐标轴。示例条形图代码展示了数据绑定至`&lt;rect&gt;`元素的过程,奠定基础,助你进阶复杂项目。
|
5天前
|
Web App开发 存储 JavaScript
前端如何学习Node.js及Node.js的主要用途
【7月更文挑战第16天】 学习Node.js对前端开发者至关重要,涉及理解其基于V8的运行时环境、JavaScript基础、安装与验证、核心模块(如fs、http、path)及npm管理。实践项目,如用Express建服务器,参与开源,深入学习异步编程和事件循环。Node.js用于服务器开发、构建工具、本地开发服务器和实时应用,提升全栈能力。借助官方文档和各种资源加速学习。
15 4
|
4天前
|
Java Android开发
android 设置系统时间的流程
android 设置系统时间的方法
11 2
|
8天前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
|
8天前
|
JavaScript 前端开发 API
前端框架与库 - Vue.js 组件与路由
【7月更文挑战第15天】Vue.js 框架以简洁API和高效DOM更新著名,组件和路由是构建应用的关键。组件是自包含的实例,常见问题包括命名冲突、作用域混淆和状态管理。要避免这些问题,可使用命名空间、明确数据绑定和事件,以及采用Vuex管理状态。Vue Router提供声明式路由,常见挑战包括路由守卫、动态路由参数和懒加载配置。正确使用路由守卫、处理动态参数和实现代码分割能优化路由管理。提供的代码示例展示了基本组件和路由配置。
|
17天前
|
前端开发 NoSQL 数据库
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
|
17天前
|
前端开发 NoSQL JavaScript
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
|
17天前
|
前端开发 JavaScript Linux
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
|
18天前
|
前端开发 JavaScript
js 打开资源管理器(经典范例:纯前端选择并预览图片)
js 打开资源管理器(经典范例:纯前端选择并预览图片)
30 0
文本vitepress,如何设置背景图,如何插入背景图,如何插入logo,为了放背景图片,我们要新建pubilc的文件夹,插入logo要在config.js中进行配置,注意细节,在添加背景时,注意格式
文本vitepress,如何设置背景图,如何插入背景图,如何插入logo,为了放背景图片,我们要新建pubilc的文件夹,插入logo要在config.js中进行配置,注意细节,在添加背景时,注意格式