Opera Mini 的占位符 polyfill答案

【问题标题】：Placeholder polyfill for Opera MiniOpera Mini 的占位符 polyfill
【发布时间】：2015-02-05 20:42:24
【问题描述】：

我使用Placeholders.js 作为占位符填充，除了在 Opera Mini 中工作正常，我猜是因为它是代理浏览器。有人有 Opera Mini 的占位符 polyfill 吗？

【问题讨论】：

【解决方案1】：

Opera Mini supports onfocus 和 onblur 事件。因此，您可以添加处理程序以在 focus 事件上隐藏占位符并在 blur 事件上显示（简单案例）。

我对 iOS Opera Mini 和 Android Opera Mini（最新版本）的测试表明，仅当您在设备键盘上按下 done 时，占位符 polyfill 才能正常工作，例如文档中的 this video。如果您在键盘外点击，文本输入将失去焦点，但不会触发模糊处理程序。也不是，这种行为是真实的，因为 Opera Mini 渲染不在您的设备上运行。更多信息here.

我的test code，我创建了一个带有 2 个文本输入的表单，并将第一个输入处理程序添加到属性。对于第二个输入，我使用 addEventListener 添加处理程序。

HTML：

  <form action="">
    <input type=text value="Аttributes handler" onfocus="(this.value === 'Аttributes handler') && (this.value = '')" onblur="(this.value === '') && (this.value = 'Аttributes handler')">
    <br><br>
    <input type=text value="" data-placeholder="Listener handler">
  </form>

Javascript：

document.addEventListener('DOMContentLoaded', function () {
  var listenerInputNode = document.querySelector('input:last-child'),
      placeholderText = listenerInputNode.getAttribute('data-placeholder');

  (listenerInputNode.value === '') && (listenerInputNode.value = placeholderText);

  listenerInputNode.addEventListener('focus', function () {
    (this.value === placeholderText) && (this.value = '');
  }, false);
    listenerInputNode.addEventListener('blur', function () {
    (this.value === '') && (this.value = placeholderText);
  }, false);

});

所以我认为 Opera Mini 中确实有用于占位符的 polyfill，但是 focus/blur 事件真的不会像您期望的那样触发。

【讨论】：

不确定我是否已经很好地解释了自己。当页面最初加载时，占位符文本没有显示，因为它在具有 HTML5 占位符支持或 JS 回退的其他浏览器中显示。因此，对于输入字段，我没有使用标签，我仅依靠占位符文本来告诉用户输入什么。

【解决方案2】：

设法通过一些 UA 嗅探来检测 Opera Mini 并使用 if 语句隐藏/显示标签来解决这个问题。如果有人觉得有用，可以发布代码。

【讨论】：