Is there a method to pick up if user types 'e' in a html input number element in Chrome

Question

When a user is typing just 'e' in a input element of type number the value of the element in JavaScript is empty, same if a user empties the input element.

I have tried different events (input, keyup, blur), but all return "" if the one types 'e'. I don't want to block it, just to know if the input element is visually empty.

Is there a way to check if the user has typed 'e' in a input number element?

const testElement = document.getElementById("number-input");

const direct = document.getElementById("direct");

let lastV;
const setOut = (v, id) => {
  const out = document.getElementById(id);
  out.innerHTML = v;
};

testElement.addEventListener('input', e => setOut(e.target.value, 'input-ex'));
testElement.addEventListener('keyup', e => setOut(e.target.value, 'keyup-ex'));
testElement.addEventListener('blur', e => setOut(e.target.value, 'blur-ex'));
document.getElementById("directBtn").addEventListener('click', e => setOut(testElement.value, 'direct-ex'));


document.getElementById("clrBtn").addEventListener('click', () => {
  testElement.value = null;
})

<input id="number-input" type="number">
<button id="directBtn">
 get direct
</button>
<button id="clrBtn">
  clear
</button>

<p id="out">
  Input <span id="input-ex"></span> <br/> Key up <span id="keyup-ex"></span> <br/> Blur <span id="blur-ex"></span> <br/> Direct <span id="direct-ex"></span> <br/>

</p>
<p id="direct">

</p>

You can try to use element.validity.valid like there https://stackoverflow.com/questions/18852244/how-to-get-the-raw-value-an-input-type-number-field — Ryu, Nov 16 '20 at 16:03

score 2 · Accepted Answer · answered Nov 16 '20 at 16:17

I would can use keydown since that event fires before the input's value property changes... Since, for example "12e" is not a valid number, that's is why property changes to "" (empty). But "12e3" is valid.

But checking the event key also will work on keyup and keypress.

const testElement = document.getElementById("number-input");

const direct = document.getElementById("direct");

let lastV;
const setOut = (v, id) => {
  const out = document.getElementById(id);
  out.innerHTML = v;
};

testElement.addEventListener('input', e => setOut(e.target.value, 'input-ex'));
testElement.addEventListener('keyup', e => setOut(e.target.value, 'keyup-ex'));
testElement.addEventListener('blur', e => setOut(e.target.value, 'blur-ex'));
document.getElementById("directBtn").addEventListener('click', e => setOut(testElement.value, 'direct-ex'));

testElement.addEventListener('keydown', e => { 
  if(e.key==="e"){
    setOut(e.key, 'keydown-ex')
  }
});


document.getElementById("clrBtn").addEventListener('click', () => {
  testElement.value = null;
})

<input id="number-input" type="number">
<button id="directBtn">
 get direct
</button>
<button id="clrBtn">
  clear
</button>

<p id="out">
  Input <span id="input-ex"></span> <br/> Key up <span id="keyup-ex"></span> <br/> Blur <span id="blur-ex"></span> <br/> Direct <span id="direct-ex"></span> <br/>
  
<br/>Key Down <span id="keydown-ex"></span> <br/>

</p>
<p id="direct">

</p>

Thank you. event.key worked with all the key events I tried 'keyup', 'keydown' and 'keypress' — Gaotter, Nov 17 '20 at 07:59

score 1 · Answer 2 · answered Nov 16 '20 at 16:22

There are many ways to know if a specific key was pressed.

const testElement = document.getElementById("number-input");
const out = document.getElementById("input-ex");

testElement.addEventListener("keypress", function(e){
    // method one
    if(e.key === "e"){
        alert("yeah");
    }
    
    // method two
    var key = e.which;
    if(String.fromCharCode(key) == "e"){
        alert("yeah")
    }

    // to output the key as the input is made
    out.innerHTML = this.value;
});

To have this in a function

function setOut(inputElemId, outputElemId){
    var input = document.getElementById(inputElemId);
    var output = document.getElementById(outputElem);

    input.addEventListener("keypress", function(e){
        // method one
        if(e.key === "e"){
            alert("yeah 'e' was pressed");
        }

        // method two
        var key = e.which;
        if(String.fromCharCode(key) == "e"){
            alert("yeah 'e' was pressed");
        }
        
        // to output the key as the input is made
        output.innerHTML = this.value;
    });
}

Use function by passing in the input field id and output field id

setOut("number-input", "input-ex");

Is there a method to pick up if user types 'e' in a html input number element in Chrome

2 Answers2