CODEWITHSUNDEEP
javascripttextinputbackspace
Mark Puchala II
Mark Puchala II

Reputation: 652

How to do something when backspace or delete is pressed

So I am having trouble getting my code to do something when I hit backspace or delete.

The code I have works just fine. It runs the following code, updating the size and value of multiple text input fields.

It calls compute(), which calls update() multiple times through 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);
  }

Now, that all runs just fine. I ran into an issue that, when an entire field is deleted, I get NaN, and can no longer edit the text fields unless I outsmart the NaN value.

How it happens is that that if a user hits "Ctrl+home", then backspace (wiping the entire field), NaN appears. What I want, instead, is that when NaN would have appeared, all of the text inputs are reset to the same size and appearance that they were when their placeholders were showing.

I had looked this up, and found the following:

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

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

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

It doesn't work. I even tried replacing the return false to instead read my replacement code: 

  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');
      }

And that doesn't work. What am I doing wrong? How can I get my fields to just reset to their original states if the entire text-field of one is wiped out?

Upvotes: 1

Views: 1697

Answers (1)

Yeldar Kurmangaliyev
Yeldar Kurmangaliyev

Reputation: 34189

You don't need to decrease the possibility of error. You need to prevent errors at all. Just validate the input data and you won't get NaN.

Simply add a check in your compute if the input is an integer:

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

where isNumeric is a function which determines if a string represents number. There are many ways to do this, for example this:

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

Also, you can stop passing your decider and number to every function as a string:

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);
}

Upvotes: 3

Related Questions