javascript - 第二次尝试单击输入字段时自动对焦不起作用

Question

我正在使用 Bootstrap 和 jQuery 创建一个多步骤表单。它分为三个部分，包括一个进度条，用于显示用户在表单处理中的当前状态。表单的最后两页工作正常，但是，表单的第一部分(电子邮件部分)不允许用户在页面加载后删除自动对焦后第二次单击电子邮件输入部分。例如，如果他们不小心点击了页面的另一部分并且自动对焦消失了，他们将无法再次点击该字段来输入。其他页面具有相同的代码，并且可以正常使用自动对焦。我不确定为什么会这样!

这是一支代码笔:

Code Pen ( @adurante95 ) .

然后这里是电子邮件部分的一些代码:

<div class="step">
            <div class="row">
                <div class="form-label-group form-group col-md-12">
                    <input type="text" id="email" class="form-control" placeholder="Email" name="email" contenteditable="true" autofocus>
                    <label for="inputEmail">Email</label>
                </div>
            </div>
        </div>

我只是不确定为什么该字段不可编辑。我尝试了 contenteditable="true"属性，但也没有用。

Answer 1

这是因为您的标签具有绝对位置并且您的输入是显示 block ，这意味着标签元素位于输入阻止访问之上。

.form-label-group > label {
  position: absolute;
  top: 0;
  display: block;
  width: 100%;
  margin-bottom: 0; /* Override default `<label>` margin */
  line-height: 1.5;
  color: #495057;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: all 0.1s ease-in-out;
  pointer-events: none;
}

但是通过添加 pointer-events: none; 您是在告诉浏览器忽略该元素上的任何用户输入，从而让您访问输入

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

https://codepen.io/anon/pen/GxrpWb工作示例