I want to create different "div" in the body when the user enter the number of div in the textbox

For example, with the markup for my textbox: `<input type="text" id="numberDiv" maxlength="1">`

I am using the following JS:

```
<script>
    $(document).ready(
    function () {
        $('#numberDiv').keyup(

        function () {
            var s = $("#numberDiv").val();
            var nbrDiv = parseInt(s);
            for(var i = 0; i <= nbrDiv; i++)
            {
               var iDiv = document.createElement('div');
               iDiv.id = 'div';
               document.getElementsByTagName('body')[0].appendChild(iDiv);
               iDiv.innerHTML = "I'm a div";
            }
        })
    });
</script>

```

My problem is when I put for example "1" in the textbox it creates 1 div but when I press an other key (for example: enter, alt, ...) it creates another div even if my input has the `maxlength="1"`. How can I disable the pressing on another key when my first number is in the textbox.