Opera Mini的占位符polyfill

Question

我使用Placeholders.js作为占位符polyfill，它在Opera Mini中工作得很好，我猜这是因为它是一个代理浏览器。有没有人有Opera Mini的占位符polyfill？

Answer 1

Opera迷你supports onfocus和onblur活动。因此您可以添加处理程序来在focus事件上隐藏占位符，并在blur事件上显示(简单情况)。

我对iOS Opera Mini和Android Opera Mini(最新版本)的测试显示，只有当你在设备键盘上按done键时，占位符polyfill才能正常工作，就像文档中的this video一样。如果您在键盘外点击，文本输入将失去焦点，但模糊处理不会触发。也不是，这样的行为是真的，因为Opera Mini render不在您的设备上运行。更多信息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 events 真的不会像您预期的那样触发。

Answer 2

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