表单事件

121 阅读1分钟
    /* 写一个表单 有密码框 */
    /* 输入框 获得焦点的时候 框内的文字颜色变红 */
    /* 输入框 失去焦点的时候 框内的文字颜色变黑 */
    /* 选择框 选择 男女 默认男 */
    /* 修改的时候触发 alert出你选的性别 */
    /* 提交 alert 我提交了 reset alert 我重置了 */

    let user = document.getElementById('user');
    let car = document.getElementById('car');
    let resetId = document.getElementById('resetId');
    let formId = document.getElementById('formId');
    let submitId = document.getElementById('submitId');

    let nan = document.getElementById('nan');
    let nv = document.getElementById('nv');
    function radioFn (val){
        alert(val)
    }



    /* onsubmit 表单提交事件不支持input标签,支持form标签*/
    formId.onsubmit = function (){
        alert('我提交了')
    }

    /* onreset 表单重置事件不支持input标签,支持form标签*/
    // resetId.onreset = function (){
    //     console.log('重置')
    // }
    /* onreset 使用这个事件 除了默认的可以清除表单外
    还可以做一些 清除表单之后的事情 ,比如把输入的背景色改回来  */
    // formId.onreset = function (){
    //     console.log('重置')
    //     user.style.background = ''
    // }





    /* onchange	 用户改变域的内容 */
    function changeFn (){
        alert(car.value)
        // alert(car.childNodes[1].innerHTML)
        /* value值是后台所需要的值 如果想传给后台 请把value属性上 写上你需要传的值 */
    }






    /* onfocus 获取焦点 */
    user.onfocus = function (){
        // user.style.background = 'yellow'
        user.style.color = 'red'
    }
    /* onblur 元素失去焦点 */
    function blurFn(){
        // user.style.background = 'red'
        user.style.color = ''
    }