javascript - 有什么方法可以使用 JavaScript *不*将焦点设置在任何 HTML 元素上？

Question

我有一个移动注册表单，其中包含用户用户名、密码和密码确认字段的 HTML 输入元素。由于这是一个移动网络应用程序，并且我试图节省屏幕空间，因此我选择放弃在每个元素上方放置 HTML 标签，而是利用占位符属性来指示在每个字段中输入的内容:。

<input id="id_username" placeholder="Choose a username" type="text" />                
<input id="id_password1" name="password1" placeholder="Choose a password" type="password" />
<input id="id_password2" name="password2" placeholder="Confirm password" type="password" />

最初，我添加了一些 JavaScript，以便在用户到达页面时将焦点放在用户名字段上:

<script type="text/javascript">
    document.getElementById("id_username").focus()
</script>

这工作得很好，只是在旧版本的默认 Android 浏览器中，这会导致占位符消失。由于缺少占位符(和标签)可能会导致用户不清楚在该字段中输入什么内容，因此我删除了 JavaScript。然而，即使没有那个 JS，我注意到 Android 浏览器仍然将焦点放在第一个表单字段中，这再次删除了标签。有什么方法可以对页面进行编码，以便保证没有浏览器(包括默认的 Android 浏览器)将焦点放在这些字段中的任何一个上？不需要额外库的技术会更好，因为我试图将页面大小和额外请求保持在最低限度。

谢谢。

Answer 1

有时，用手编写一些简单的功能会更快。查看 js fiddle 中的示例。如果您愿意，可以用 native javascript 替换 jquery。

https://jsfiddle.net/ShinShil/y7o8mrwh/2/

var placeholder = 'enter something';
$(document).ready(function() {
  $('.placeholder').val(placeholder);
    $('.placeholder').focusin(function() {
    if($(this).val() == placeholder && $(this).hasClass('opacity')) {
      $(this).val('');
      $(this).removeClass('opacity');
    }
  });
  $('.placeholder').focusout(function() {
    if($(this).val() == '') {
        $(this).val(placeholder);
      $(this).addClass('opacity');
    }
  });
});