留言板——输入框输入文字按回车下面显示 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function() {
    
    var oText = document.getElementById('text1');
    var oUl = document.getElementById('ul1');
    
    oText.onkeyup = function(ev) { //输入框当键盘按键抬起的时候执行的函数
        
        var ev = ev || event;  //事件的浏览器兼容性
        
        if ( this.value != '' ) { //如果输入框的内容不为空
            
            if (ev.keyCode == 13 && ev.ctrlKey) {  //如果键盘的按键为回车（编码为13）且按住了ctrl键
            
                var oLi = document.createElement('li');  //创建li标签
                oLi.innerHTML = this.value;  //li的值为输入框的内容
                
                if ( oUl.children[0] ) {  //如果ul存在第一个子元素
                    oUl.insertBefore( oLi, oUl.children[0] );  //就把新加的元素填写在第一个元素之前
                } else {
                    oUl.appendChild( oLi ); //如果不存在就添加一个子元素
                }
                
            }
            
        }
        
    }
    
}
</script>
</head>

<body>
    <input type="text" id="text1" />
    <ul id="ul1"></ul>
</body>
</html>

 

posted @ 2017-04-12 11:22  念念念不忘  阅读(255)  评论(0)    收藏  举报