Question

我正在使用Placeholders.js作为占位符polyfill，除了Opera Mini之外，我猜的是因为它是代理浏览器。有没有人为Opera Mini提供占位符polyfill？

Answer 1

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

我对iOS Opera Mini和Android Opera Mini（上一版本）的测试表明，只有当您在设备键盘上按done时才能正常使用占位符polyfill。如果您在键盘外部点击，文本输入将失去焦点，但模糊处理不会触发。也不是，这种行为是正确的，因为Opera Mini渲染不会在您的设备上运行。更多信息this video。

我的here，我创建了一个包含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中的占位符确实有效填充，但focus / blur事件真的不会像您预期的那样触发。

Answer 2

使用一些UA嗅探来检测Opera Mini并使用if语句隐藏/显示标签。如果有人发现它有用，可以发布代码。

Opera Mini的占位符polyfill

2 个答案: