Comment faire quelque chose lorsque vous appuyez sur la touche de retour arrière ou sur la touche de suppression

Question

J'ai donc du mal à faire faire quelque chose à mon code lorsque je recule ou que je supprime.

Le code que j'ai fonctionne très bien. Il exécute le code suivant, en mettant à jour la taille et la valeur de plusieurs champs de saisie de texte.

Il appelle compute(), qui appelle mise à jour() plusieurs fois par updateAllFields().

function compute(input,number){ 
    var decider = String(input.value); 
    updateAllFields(decider,number); 
    } 
    function update(label,convert,decider,number){ 
    var updater = document.getElementById(label); 
    updater.value = parseInt(decider, number).toString(convert); 
    updater.style.width = ((updater.value.length + 1) * 12.5) + 'px'; 
    } 
    function updateAllFields(decider,number){ 
    update('binary',2,decider,number); 
    update('octal',8,decider,number); 
    update('decimal',10,decider,number); 
    update('hexadecimal',16,decider,number); 
    } 

Maintenant, tout fonctionne bien. J'ai rencontré un problème qui, quand un champ entier est supprimé, je reçois NaN, et ne peut plus éditer les champs de texte à moins que je ne déjoue la valeur NaN. Comment ça se passe est que si un utilisateur frappe "Ctrl + accueil", puis retour arrière (effacer le champ entier), apparaît NaN. Ce que je veux, au contraire, c'est que quand NaNest apparu, toutes les entrées de texte sont réinitialisées à la même taille et l'apparence qu'elles étaient lorsque leurs espaces réservés étaient montrant.

Je l'avais regardé ça, et a trouvé ce qui suit:

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

input.onkeydown = function() { 
    var key = event.keyCode || event.charCode; 

    if(key !== 8 && key !== 46) 
     return true; 
}; 

Il ne fonctionne pas. J'ai même essayé de remplacer le return false à lire mon code au lieu de remplacement:

function refresh(label,number){ 
    var refresher = document.getElementById(label); 
    refresher.value = ''; 
    refresher.size = number; 
    } 
    function refreshAllFields(){ 
     refresh('binary','3'); 
     refresh('octal','2'); 
     refresh('decimal','4'); 
     refresh('hexadecimal','8'); 
     } 

Et cela ne fonctionne pas. Qu'est-ce que je fais de mal? Comment puis-je réinitialiser mes champs à leur état d'origine si tout le champ de texte de l'un est effacé?

Answer 1

Vous n'avez pas besoin de réduire la possibilité d'erreur. Vous devez éviter les erreurs du tout. Il suffit de valider les données d'entrée et vous n'obtiendrez pas NaN.

ajouter simplement un chèque dans votre compute si l'entrée est un entier:

function compute(input,number){ 
    var decider = String(input.value); 
    if (isNumeric(decider)) 
    { 
     // do something else 
     decider = "0"; // for example 
    } 
    updateAllFields(decider, number); 
} 

où isNumeric est une fonction qui détermine si une chaîne représente le nombre. Il y a many ways to do this, par exemple ceci:

function isNumeric(value) 
{ 
    if (isNaN(value)) { 
     return false; 
    } 
    var x = parseFloat(value); 
    return (x | 0) === x; 
} 

En outre, vous pouvez arrêter de passer votre decider et number à toutes les fonctions comme une chaîne:

function compute(input, number){ 
    if (isNumeric(input.value)) 
    { 
     updateAllFields(parseInt(input.value, number)); // val is a Number now 
    } else { 
     updateAllFields(0); // for example 
    }  
} 
function update(label,convert,val){ 
    var updater = document.getElementById(label); 
    updater.value = val.toString(convert); 
    updater.style.width = ((updater.value.length + 1) * 12.5) + 'px'; 
} 
function updateAllFields(val) { 
    update('binary',2,val); 
    update('octal',8,val); 
    update('decimal',10,val); 
    update('hexadecimal',16,val); 
}