使用 CSS "content" 属性中断表单交互

Question

作为一项可用性功能，我想以类似于 the moneysupermarket forms 的方式向当前聚焦的表单元素添加高亮显示。我正在使用 HTML 模式来构建我无法更改的表单：

<div class="field">
  <label for="name">
    Name
  </label>
  <input id="name" type="text" value="Fred">
</div>

我想我想出了一个简单的解决方案：我将添加 focus 和 blur 事件到所有输入，selects 和文本区域，切换 .hasfocus class 在包装上 div，然后在那个 class.

上勾上样式

这是 demo on JSBin 但如果您使用的是 Firefox 或 Chrome 40，您可能会看到我遇到的问题：添加 CSS content 属性到 div.field 破坏了表单交互 ，似乎最初的鼠标点击被浏览器吞没了，你无法select内容。我很难过，我认为这可能是浏览器错误。有什么想法可以使突出显示的元素与其他元素表现得一样吗？

提前致谢！

编辑：

这是演示该问题的截屏视频：http://screencast.com/t/LlmwcsZ2qYM

Answer 1

您错过了 test-x 参考资料。通过标签关注字段的整个想法是 for 属性与 id 属性的映射。 name 属性本身并不能解决问题。由于 id 必须在页面上具有唯一值，因此我最终得到 5.

<label for="test5">
    Test 5
</label>
<!-- name="test4" -->
<select id="test5">
  <option value="">one</option>
  <option value="">two</option>
  <option value="">three</option>
</select>

因此您可以通过以下方式简化您的逻辑：

$('input, select, textarea').on('focus blur', function (){
    var el = $(this),
        field = el.closest('.field');

    field.toggleClass('hasfocus');
});

您可以保留 .control.hasfocus:before 以在 .control 类上禁用此效果。

希望对您有所帮助。

DEMO

Answer 2

我无法在 Chrome 42 中重现，但我在 Firefox 37 中重现了这一点。似乎将突出显示添加到标签元素可以解决问题：

.field.hasfocus label:before {
    content:"";
    ...
}

已更新 JS Bin：http://jsbin.com/kajifoquci/edit?html,css,js,output

使用 CSS "content" 属性中断表单交互

Using CSS "content" property breaks form interaction

html

css

forms

interaction

使用 CSS "content" 属性 中断表单交互

Using CSS "content" property breaks form interaction

html

css

forms

interaction

使用 CSS "content" 属性中断表单交互