利用input event 实时监听input输入的内容

<div id="addNumber">
    <p>How many people would you like to invite?</p>
    <input id="numPeople" type="number" min="0" value="" placeholder="0" />
</div>

<div id="addPeople" style="display:none">
    <p>Enter the invitee's info.</p>
    <div id="memberFields"></div>
    <input type="submit" value="Send Invitations"/>
</div>

body {background: #bassa55; font-family: sans-serif;}

p {margin: 1em 0 .5em}

input {
    font-size: 1.2em;
    border-radius: 4px;
    padding: 4px;
}

input[type="submit"]{
    margin-top: .5em
}

/* oninput event handler (and input event handler event types) on html5 input[type="number"] 
   by @girlie_mac

   This quick demo shows that it is ideal to use 'input' event for better user-experience over 'change' (which requires a user to blur the field once), or 'keyup' event (which doesn't fire when you use the up/down arrow to change the values).

    Try this on the browser that supports the html5 input attributes and the html5 oninput event, such as Chrome.

*/

var numPeople = document.getElementById("numPeople"),
    peopleDiv = document.getElementById("addPeople"),
    memberFields = document.getElementById("memberFields");

numPeople.addEventListener("input", function(e) {

    peopleDiv.style.display = "block";
    var num = numPeople.value;

    // count pre-filled fields
    var numNode = memberFields.childNodes.length,
        numDisplay = num - numNode;

    // populate fields
    var html = '<input type="text" value="" name="member" placeholder="Twitter ID or Email" />';

    if (numDisplay >= 0) {
        for (var i = 0; i < numDisplay; i++) {
            var div = document.createElement("div");
            div.innerHTML = html;
            memberFields.appendChild(div);
        }
    } else {
        var numDelete = Math.abs(numDisplay);
        for (var i = 0; i < numDelete; i++) {
            memberFields.removeChild(memberFields.lastChild);
        }
    }

}, false);