placeholder - Opera Mini 的占位符 polyfill

Question

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

Answer 1

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

Answer 2

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

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

我的测试代码，我创建了一个带有 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事件并没有像你期望的那样触发。