juvascript时间处理-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_61282942/article/details/127607087

7.1input的事件

onfocus 获取焦点的时候触发
onblur 失去焦点的时候触发
onchange 当输入框的内容和上一次内容不一致的时候触发
oninput 当输入框的内容发生改变的时候触发实时触发
onselect 当选中输入框中的内容时触发

<script>
        var oinput = document.getElementsByTagName("input")[0]
        // input框的事件
        // 1.input.onfocus 获取焦点的时候触发
        oinput.onfocus = function () {
            console.log("获取焦点")
        }
        // 2.input.onblur  失去焦点的时候触发
        oinput.onblur = function () {
            console.log("失去焦点")
        }
        // 3.input.onchange 当输入框的内容和上一次内容不一致的时候触发
        oinput.onchange = function () {
            console.log("onchange")
        }
        // 4.input.oninput 当输入框的内容发生改变的时候触发  实时触发
        oinput.oninput = function () {
            console.log("oninput");
            console.log(this.value)
        }
        // 5.input.onselect  当选中输入框中的内容时触发
        oinput.onselect = function () {
            console.log("选中")
        }
    </script>

7.2form的事件

onsubmit input表单的type类型为submit button按钮可以触发
onreset input表单的type类型设置为reset

<body>
    <form action="javascript:void(0)">
        <input type="text">
        <input type="file">
        <input type="submit" value="提交">
        <input type="reset" value="重置">

        <!-- <button>提交</button>
        <button>重置</button> -->
    </form>
    <script>
        var oForm = document.getElementsByTagName("form")[0]
        // 1.onsubmit  input表单的type类型为submit  button按钮可以触发
        oForm.onsubmit = function () {
            console.log("提交")
        }
        // 2.onreset  input表单的type类型设置为reset
        oForm.onreset = function () {
            console.log("重置")
        }

        // 事件：由某个动作触发的  方法：函数 主动去调用某个动作
    </script>
</body>

7.3表单中的方法

input元素.focus() 获取焦点
input元素.blur() 失去焦点
form元素.submit() 提交提交是默认提交本页面
form元素.reset() 重置

<body>
    <form action="">
        <input type="text" placeholder="请输入姓名" name="name1">
    </form>
    <p>获取焦点</p>
    <p>失去焦点</p>
    <p>提交</p>
    <p>重置</p>
    <script>
        var oForm = document.getElementsByTagName("form");
        var oP = document.getElementsByTagName("p");
        // 1.点击第一个p标签  让input输入框获取焦点
        oP[0].onclick = function () {
            //input元素.focus()
            oForm[0].name1.focus();
        }
        oP[1].onclick = function () {
            //input元素.blur()
            oForm[0].name1.blur();
        }

        oP[2].onclick = function () {
            //form元素.submit()  提交是默认提交本页面
            oForm[0].submit()
        }
        oP[3].onclick = function () {
            //form元素.reset()
            oForm[0].reset()
        }
    </script>
</body>