1

如果自定义占位符元素位于输入上方，例如使用position: absolute，则无法单击输入。一个几乎跨浏览器的解决方案是使占位符“非交互”：

.noninteracting {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

但是，pointer-events: none在 IE 中不支持。这里提出了许多替代方案，但它们看起来很老套，对于我想做的事情来说可能有点矫枉过正。

将文本放置在其他元素之上但不允许用户与之交互的最简单的跨浏览器方式是什么？

4

2 回答 2

0

如果单击占位符，您还可以在输入上调用焦点。

$(".placeholder").click( function(e){ $('.input').focus(); });
于 2013-08-25T03:42:49.903 回答
0

我认为这是最好的选择。它包括许多不同的组件，但我相信它涵盖了所有可能的场景。

将类“no-js”添加到 html 元素。

  <html class="no-js">

每个输入字段都有一个标签。

  <label class="no-js-label">Email Address</label>

如果启用了 Javascript，您将删除标题上的类，从而隐藏标签。

 .no-js-label { display:none; }
 .no-js .no-js-label { display:none; }

然后使用带有 polyfill 的 html5 占位符。此列表包括许多选项。 https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

于 2013-08-26T22:39:32.193 回答