web-dev-qa-db-fra.com

Nouveau comportement d'espace réservé aux entrées dans Safari 10 - ne se cache plus en cas de modification via JavaScript

Safari 10.0 sous macOS Sierra semble avoir changé le comportement de l'espace réservé dans une entrée lorsque la valeur d'entrée est modifiée via JavaScript. Désormais, il diffère également de ce que fait Chrome (53.0.2785.116).

Jusqu'à présent, lors de la définition d'une valeur d'entrée via JavaScript, l'espace réservé disparaîtrait. Après avoir redéfini la valeur sur vide via JavaScript, l’espace réservé réapparaîtrait.

Maintenant, la définition de la valeur d'entrée via JavaScript ne masque pas l'espace réservé, jusqu'à ce que l'entrée devienne active par la suite (par exemple, en cliquant dessus). 

Vérifiez ce JS Bin pour une démonstration: https://jsbin.com/rogoludahu/edit?html,js,output

Est-ce le comportement prévu? Si tel est le cas, existe-t-il une solution de contournement astucieuse pour masquer/afficher l'espace réservé après une modification via JavaScript? 

Edit: Ce fichier a maintenant été déposé sur rdar: // 28412751 pour Safari 10 et Safari Technology Preview.

javascripthtmlsafarimacos-sierra
21
Joshua

Ce problème a été résolu dans Safari Technology Preview version 37 (Safari 11.1, WebKit 12605.1.2) ainsi que dans la version standard de Safari 11.0.3 (WebKit 13604.5.6).

2
Joshua

J'ai rencontré ce problème plus tôt aujourd'hui. D'après ce que j'ai vu, il n'y a pas de bonne solution. Ma solution de contournement consistait à appeler .focus(), puis .blur() sur l'élément dès que la valeur lui était donnée.

5
JustAProgrammer

Selon ce fil Apple (et confirmé par l’un de mes collègues), ce n’est un problème si vous avez ouvert la console Javascript. Donc, vous n'avez probablement pas à vous soucier d'une solution de contournement!

0
Ben Kuhn

Je ne sais pas si le bogue est retourné ou s'il n'a jamais été corrigé correctement (Safari 11.0.3). Peut être reproduit avec le jsbin de Joshua. La solution pour nous était de redéfinir le champ sur le changement. Nous utilisons ExtJS, il s'agit donc d'une capture pour la substitution de champ, mais nous devrions pouvoir l'appliquer dans n'importe quel autre framework ou 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()
        }
    })  
}
0
Tomi Močnik