Safari 10 中的新输入占位符行为 - 不再通过 JavaScript 隐藏更改

Question

macOS Sierra 中的 Safari 10.0 似乎已经改变了当通过 JavaScript 更改输入值时输入中占位符的行为方式。它现在也不同于 Chrome (53.0.2785.116) 正在做的事情。

到现在为止， 当通过 JavaScript 设置输入值时，占位符会消失。通过 JavaScript 将值设置回空后，占位符将重新出现。

现在， 通过 JavaScript 设置输入值不会隐藏占位符，直到输入之后获得焦点（例如通过单击）。

查看此 JS Bin 以获取演示：https://jsbin.com/rogoludahu/edit?html,js,output

这是预期的行为吗？如果是这样，在通过 JavaScript 更改后，是否有 hiding/unhiding 占位符的巧妙解决方法？

编辑：现在已在 rdar://28412751 为 Safari 10 和 Safari Technology Preview 归档。

Answer 1

我今天早些时候运行解决了这个问题。据我所知，没有好的解决方案。我的 hacky 解决方法是调用 .focus() 然后在元素上调用 .blur() 后立即给它赋值。

Answer 2

此问题已在 Safari 技术预览版 37（Safari 11.1、WebKit 12605.1.2）以及常规 Safari 版本 11.0.3（WebKit 13604.5.6）中得到解决。

Answer 3

根据 this Apple thread（并由我的一位同事确认），只有打开 Javascript 控制台才会出现此问题。所以，您可能不需要担心解决方法！

Answer 4

我不知道错误是再次出现还是从未得到正确修复 (Safari 11.0.3)。可以用 Joshua 的 jsbin 重现。我们的解决方案是根据变化重新绘制字段。我们正在使用 ExtJS，因此这是字段覆盖的片段，但应该能够将其应用于任何其他框架或 vanila。

if(Ext.isSafari && !Ext.isEmpty(me.emptyText)) {
    me.on('change', function() {
        var me = this;

        if(me.rendered && me.el && Ext.isFunction(me.el.redraw)) {
            me.el.redraw()
        }
    })  
}

Safari 10 中的新输入占位符行为 - 不再通过 JavaScript 隐藏更改

New input placeholder behavior in Safari 10 - no longer hides on change via JavaScript

html

javascript

safari

macos-sierra