lovecoding
/
W250913


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" placeholder="请输入内容">
    <button>按钮</button>
    <button>获取焦点</button>
    <button>失去焦点</button>
    <script>
        var oBtn = document.getElementsByTagName("button")[0];
        var oInp = document.getElementsByTagName("input")[0];
        var blur = document.getElementsByTagName("button")[2];
        var fouce = document.getElementsByTagName("button")[1];

        oBtn.onclick = function(){
            // value 可以获取文本框内的值
            var val = oInp.value;
            console.log(val);
            // value 是可读可写的 可以向文本框内添加值
            oInp.value  = "";
        }
        fouce.onclick = function(){
            // focus 控制文本框获取焦点
            oInp.focus();
        }

        blur.onclick = function(){
            // blur文本框失去焦点
            oInp.blur();
        }

        // keypress 可以捕捉到键盘输入事件 点击了哪一个键
        oInp.onkeypress = function(event){
            // console.log(event)
        }
        // input 文本框输入事件 只要输入内容就能触发事件
        oInp.oninput = function(event){
            console.log(this.value)
        }
    </script>
</body>
</html>