JavaScript: How to detect a non empty input text box

Question

I am learning JavaScript and and am working on a To Do list type of application.

Idea: "Add" button is set to disabled in the HTML and only to be enabled when there is at least one character.

My code only works when there is at least 2 characters and can't workout why it doesn't detect the first character.

The other realted question is how do I set the "add" button back to disable if the input box content has been deleted.

HTML

<input id="addToListInput" onkeydown="buttonStatus()" value="" type="text"><input id="addToListButton" disabled type="submit" Value="Add to list" onClick="addToList(this)">

JS

function buttonStatus() {
        var input = document.getElementById('addToListInput');
        var submit= document.getElementById('addToListButton');
        if (input.value.trim() ==""){
            submit.disabled=true;
        }else{
            submit.disabled=false;
        }
    }

Answer 1

Use keyup instead. By using keydown you are detecting when the key is down, but the textbox value has not changed at that point...

<input id="addToListInput" onkeyup="buttonStatus()" value="" type="text">

Answer 2

在实际触发输入控件之前会触发onkeydown，如果您使用onkeyup，它将按预期工作。