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 =＆＃34; true＆＃34;属性和那也不起作用。

Answer 1

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

.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工作示例

Answer 2

你的问题是你的CSS。使用Tab键时，输入重新聚焦。但标签涵盖了所有输入字段，因此您无法单击它。从display: block;样式中删除width: 100%;和.form-label-group > label。

修改

另一种方法是在使用jQuery单击标签时聚焦输入。

$(".form-label-group label").click(function() { $(this).parent().find("input").focus(); });

尝试第二次单击输入字段时，自动对焦无法工作

2 个答案: