How to do something when backspace or delete is pressed

Question

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?

score 3 · Accepted Answer · edited May 23 '17 at 10:27

3

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

edited May 23 '17 at 10:27

Community

1
1

answered Nov 12 '15 at 03:46

Yeldar Kurmangaliyev

33,467
12
59
101

On my side, your advice on "val" seems to stop the functions from running altogether. Also: While this "isNumeric(value)" function seemed to fix my NaN issue, it's also introduced a new problem of limiting how many characters long my text can be, as well as not resizing the textboxes when they clear. – Mark Puchala II Nov 12 '15 at 04:27
@MarkPuchalaII Doing exactly the same as an answer says shouldn't help. It is just an example, which shows what you can do with your problem. So, do you have any errors in a console? – Yeldar Kurmangaliyev Nov 12 '15 at 04:29
Might wanna double-check my comment; I was actually in the middle of changing it (I realized it was poorly worded, as you pointed out) as you were responding. Also: No errors. – Mark Puchala II Nov 12 '15 at 04:31
@MarkPuchalaII It will limit how many characters long your text can be, because JavaScript and any other programming languages have limits on values of numeric types. You could enter a long number in your program before my changes, but it wouldn't work as well. See [reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number#Integer_range_for_Number). What about resizing - I haven't implemented it. It is actually another question. You can do it yourself or find the solution in the Internet. – Yeldar Kurmangaliyev Nov 12 '15 at 04:55
Any way to get this back to not limiting how many characters long my text can be? the "ParseInt()" function within the "isNumeric()" seems to be what's causing the limitation. I'm trying to figure it out for myself, but so far am unable.. – Mark Puchala II Nov 12 '15 at 05:22
@MarkPuchalaII JavaScript cannot work with such big numbers as you enter. Even if you remove this `isNumeric` function, you won't be able to convert your value to binary, hexadecimal etc., because your number is too large, i.e. invalid. – Yeldar Kurmangaliyev Nov 12 '15 at 05:31
Using "updater.value = parseInt(decider, number).toString(convert);", they all convert just fine. For example, "binary.value = parseInt(1101, 2).toString(8);" turns into an octal just fine, as far as updating the textbox is concerned. That's why I was returning everything as strings, as it allowed for much larger numbers. – Mark Puchala II Nov 12 '15 at 05:50

How to do something when backspace or delete is pressed

1 Answers1