强制软件键盘在 HTML 加载中显示在焦点输入上



使用简单的HTML页面,如何在智能手机上加载文档后以编程方式打开软件键盘?为了获得更好的用户人体工程学,目标是在软键盘已经打开的情况下专注于第一个输入。只是为了写并继续。

无需任何用户交互,加载页面后,.focus(( .click(( 和触发器 touchstart/touchend/mousedown/mouseup 都不会打开系统软键盘。

一个想法?...

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script>
    var loadDOM = 0;
    var loadload = 0;
    function fullloaded() {
      if (loadDOM == 1 && loadload == 1) {
        var el = document.getElementById('test2');
        triggerEvent(el, 'touchstart');
        var el = document.getElementById('test2');
        triggerEvent(el, 'touchend');
        var el = document.getElementById('test2');
        triggerEvent(el, 'mousedown');
        var el = document.getElementById('test2');
        triggerEvent(el, 'focus');
        el.focus();
        var el = document.getElementById('test2');
        triggerEvent(el, 'mouseup');
        var el = document.getElementById('test2');
        triggerEvent(el, 'click');
        el.click();
      }
    }
    document.addEventListener('DOMContentLoaded', function(e) {
      logEvent('DOMContentLoaded');
      loadDOM = 1;
      fullloaded();
    });
    window.addEventListener("load", function(event) {
      var logEvent('load : All resources finished loading!');
      loadload = 1;
      fullloaded();
    });
  </script>
</head>
<body>
  <input id="test2" placeholder="_default_" />
</body>
</html>

在使用多个设备进行测试后,简短的回答是您无法在加载 Web 视图时打开软键盘,因为用户没有"触摸"屏幕上的任何元素。

用户触摸屏幕后,任何输入文本元素上的 focus(( 都应该调出键盘,但不幸的是,在用户不触摸屏幕的情况下首次打开页面加载键盘是不可能的,因此即使此操作的 setTimeout 或延迟也不起作用,除非用户在该时间范围内触摸屏幕。

试试这个。

<input type="text" autofocus>

在JavaScript中尝试这个

$(function() {
var el = document.getElementById('.class');
    el.focus();
});

最新更新