关于js_表单事件的介绍与使用

最新推荐文章于 2024-02-07 08:43:17 发布

NewBurlaSKing

最新推荐文章于 2024-02-07 08:43:17 发布

阅读量497

点赞数

分类专栏： javascript 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_55961861/article/details/126352392

版权

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

js_表单事件

表单内元素事件
- input事件
  
  当<input>,<select>,<textarea> 的值发生变化时触发。对于复选框（ <input type=checkbox> ）或单选框（ <input type=radio> ），用户改变选项时，也会触发这个事件。
  
  特点：连续触发，比如用户每按下一次按键，就会触发一次input事件。
- select事件
  
  当在<input>,<textarea>里面选中文本时触发
- change事件
  
  当<input>,<select>,<textarea>的值发送改变时触发。不会连续触发，只有失焦或按回车才会触发！

表单元素事件
- reset事件
  
  重置数据，（所有表单成员变回默认值）
- submit事件
  
  当表单数据向服务器提交时触发，注意，submit事件的发生对象是元素，而不是元素，因为提交的是表单，而不是按钮

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="p">
    <br>
    <input type="text" id="p1">
    <br>
    <form action="我的服务器" name="myform">
        <input type="text" name="username">
        <button οnclick="resethandle">重置</button>
        <button οnclick="submithandle">提交</button>
    </form>
    <script>
        var p = document.getElementById('p');
        var p1 = document.getElementById('p1');
        p.oninput = function(e) {
            console.log(e.target.value);
        }
        p.onselect = function() {
            console.log('输入框里面有内容被选中了！');
        }
        p1.onchange = function(e) {
            console.log(e.target.value);
        }

        var myform = document.getElementsByTagName('myform');
        function resethandle() {
            myform.reset();
        }
        function submithandle() {
            myform.submit();
        }
    </script>
</body>
</html>