web-dev-qa-db-ja.com

Safari10の新しい入力プレースホルダーの動作-JavaScriptによる変更で非表示になりません

MacOSSierraのSafari10.0は、JavaScriptを介して入力値が変更された場合の入力のプレースホルダーの動作を変更したようです。また、Chrome（53.0.2785.116）が行っていることとも異なります。

これまで、JavaScriptを介して入力値を設定すると、プレースホルダーが表示されなくなりました。 JavaScriptを使用して値を空に戻すと、プレースホルダーが再表示されます。

現在、JavaScriptを介して入力値を設定しても、後で入力がフォーカスを取得するまで（たとえば、クリックされるまで）、プレースホルダーは非表示になりません。

デモについては、このJSビンを確認してください： https://jsbin.com/rogoludahu/edit?html,js,output

これは意図された動作ですか？もしそうなら、JavaScriptを介して変更した後にプレースホルダーを非表示/非表示にするための賢い回避策はありますか？

編集：これは、Safari10およびSafariTechnology Previewのrdar：// 28412751に提出されました。

javascripthtmlsafarimacos-sierra
21
Joshua

これは、Safari Technology Previewリリース37（Safari 11.1、WebKit 12605.1.2）および通常のSafariバージョン11.0.3（WebKit 13604.5.6）で解決されています。

2
Joshua

私は今日早くこの問題に遭遇しました。私が見た限りでは、良い解決策はありません。私のハッキーな回避策は、値が与えられたらすぐに要素に対して.focus()を呼び出してから.blur()を呼び出すことでした。

5
JustAProgrammer

this Apple thread （そして私の同僚の1人によって確認された）によると、これはJavascriptコンソールを開いた場合にのみ問題になります。回避策について心配する必要はありません！

0
Ben Kuhn

バグが戻ったのか、正しく修正されなかったのかわかりません（Safari11.0.3）。 Joshuaのjsbinで再現できます。私たちの解決策は、変更時にフィールドを再描画することでした。 ExtJSを使用しているので、これはフィールドオーバーライドの一部ですが、他のフレームワークやバニラに適用できるはずです。

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()
        }
    })  
}
0
Tomi Močnik