Que devrait faire le réglage de la valeur d'un champ de texte HTML sur null ?

Question

Nous avons une réponse JSON qui peut contenir des valeurs nulles (par exemple { myValue: null }) - nous assignons cette valeur à une zone de texte sur un formulaire : (en réalité, nous utilisons JQuery, mais ceci est équivalent

var nullString = null;
document.getElementById('myInput').value = nullString;

Si nous assignons cette valeur à une valeur de zone de texte HTML, le comportement semble dépendre du navigateur :

• Firefox et Chrome affichent tous deux une zone de texte vide, et lorsque vous lisez 'valeur' en arrière, vous obtenez null.

• IE place la chaîne 'null' dans la zone de texte, et lorsque vous lisez 'valeur' en arrière, vous obtenez la chaîne "null" (c'est-à-dire que définir 'valeur' et le lire en arrière a modifié les données)

(C'est ici : http://jsbin.com/uleno/edit si quelqu'un veut essayer)

Quel navigateur fait la bonne chose ici, ou s'agit-il d'un comportement indéfini ? Et y a-t-il une solution plus intelligente et plus élégante que de faire beaucoup de choses (myValue == null ? '' : myValue) ?

Answer 1

En fait, la chose la plus simple à faire est la suivante:

document.getElementById('myInput').value = nullString || '';

Vous savez que la valeur doit recevoir une chaîne de caractères, donc si elle est une autre valeur 'falsy'*, vous retournez la chaîne vide.

* null, undefined, 0, false, ''

Answer 2

Ce qui se passe en réalité, c'est que l'objet null est transformé en chaîne de caractères, comme null.toString(). Dans une boîte de dialogue alert(), le navigateur interprète généralement l'objet au lieu de simplement le transformer en chaîne, donc le résultat sera différent. Et bien sûr, les navigateurs (surtout IE) interprètent et transforment en chaîne de manière différente.

Pour ce que ça vaut, il y a une logique à retourner null lorsqu'une chaîne est attendue. Ce qui renvoie cette valeur le fait probablement afin de fournir une valeur fausse pour un test conditionnel facile, tout en indiquant toujours que le résultat est vide plutôt que, par exemple, indéfini. Les méthodes du DOM qui renvoient des objets de collection font de même. De plus, alors qu'une chaîne vide ('') est une valeur fausse, un objet String vide (new String('')) ne l'est pas ; et ce dernier peut être créé à partir du premier accidentellement avec un traitement ultérieur. Ainsi, la manière "sûre" d'empêcher le code consommateur de rejeter accidentellement une chaîne valide est de retourner une chaîne vide ou un objet String dans un cas, et null dans un autre.

Answer 3

Je ne suis pas sûr que ma solution fonctionnera pour vous, mais voici une tentative de résoudre le problème, qui est nouveau pour moi. Son principal avantage est qu'il ne va pas encombrer le code et que vous aurez un seul endroit qui gère cette logique. Cela concerne spécifiquement IE autant que je sache.

var input = document.getElementById('myInput');

if (input.attachEvent) {
    input.attachEvent("onpropertychange", function() {
        var event = window.event;

        if (event.propertyName === "value" && event.srcElement.value === "null") {
            event.srcElement.value = "";
        }
    });
}

input.value = null;

alert(input.value);

Answer 4

Pourquoi ne pas utiliser une chaîne vide? Tout d'abord, réduisez la valeur. Ensuite, vérifiez si la chaîne est vide.

String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g,"");
}
String.prototype.ltrim = function() {
    return this.replace(/^\s+/,"");
}
String.prototype.rtrim = function() {
    return this.replace(/\s+$/,"");
}