• (96)Wangdao.com_第二十九天_表单事件


    表单事件

    input 事件        select 事件        change 事件        invalid 事件        reset 事件         submit 事件

    input 事件

    <input>、<select>、<textarea>的值发生变化时触发

    对于 复选框(<input type=checkbox>)单选框(<input type=radio>),用户改变选项时,也会触发这个事件

    对于打开 contenteditable 属性的元素,只要值发生变化,也会触发 input 事件

    • 特点:

    连续触发,比如用户每按下一次按键,就会触发一次 input 事件

    在元素的值发生变化后立即发生   

    有连续变化,input 事件会触发多次,而 change 事件只在失去焦点时触发一次

    继承了 InputEvent 接口

    select 事件

    当在<input>、<textarea>里面选中文本时触发

    • // HTML 代码如下
      // <input id="test" type="text" value="Select me!" />
      
      var elem = document.getElementById('test');
      elem.addEventListener('select', function (e) {
          console.log(e.type);    // "select"
      }, false);

    选中的文本可以通过 event.target 元素的 selectionDirectionselectionEndselectionStartvalue 属性拿到

    change 事件 

    当<input>、<select>、<textarea>的值发生变化时触发。

    它与 input 事件的最大不同,就是不会连续触发,只有当全部修改完成时才会触发,另一方面 input 事件必然伴随 change 事件。

    • 激活 单选框(radio)或 复选框(checkbox)时触发。
    • 用户提交时触发。        比如,从下列列表(select)完成选择,在日期或文件输入框完成选择。
    • 当文本框或<textarea>元素的值发生改变,并且丧失焦点时触发。
    • // HTML 代码如下
      // <select size="1" onchange="changeEventHandler(event);">
      //   <option>chocolate</option>
      //   <option>strawberry</option>
      //   <option>vanilla</option>
      // </select>
      
      function changeEventHandler(event) {
          console.log(event.target.value);
      }

    invalid 事件

    用户提交表单时,如果表单元素的值不满足校验条件,就会触发 invalid 事件

    • // 输入框是必填的。如果不填,用户点击按钮提交时,就会触发输入框的invalid事件,导致提交被取消
      <form>
          <input type="text" required oninvalid="console.log('invalid input')" />
          <button type="submit">提交</button>
      </form>

    reset 事件

    这个事件发生在表单对象 <form上,而不是发生在表单的成员上

    当表单重置(所有表单成员变回默认值)时触发

    submit 事件

    当表单数据向服务器提交时触发。

    注意,submit事件的发生对象是 <form> 元素,而不是<button>元素,因为提交的是表单,而不是按钮

     

    浏览器原生提供 InputEvent() 构造函数, 用来生成实例对象

    InputEvent接口主要用来描述 input 事件的实例。

    该接口继承了 Event 接口,还定义了一些自己的实例属性和实例方法。

    • var inputEvent = new InputEvent(type, options);

    第一个参数 是字符串,表示事件名称,该参数是必需的。

    第二个参数 是一个配置对象用来设置事件实例的属性,该参数是可选的。

    配置对象的字段除了 Event 构造函数的配置属性,还可以设置下面的字段,这些字段都是可选的

    • inputType            字符串,表示发生变更的类型(详见下文)。
    • data            字符串,表示插入的字符串。如果没有插入的字符串(比如删除操作),则返回 null 或空字符串。
    • dataTransfer            返回一个 DataTransfer 对象实例,该属性通常只在输入框接受富文本输入时有效。

    event.data

     返回一个字符串,表示变动的内容

    • // HTML 代码如下
      // <input type="text" id="myInput">
      var input = document.getElementById('myInput');
      input.addEventListener('input', myFunction, false);
      
      function myFunction(e) {
          console.log(e.data);
      }

    event.inputType

    • 返回一个字符串,表示字符串发生变更的类型
    • insertText           手动插入文本
    • insertFromPaste           粘贴插入文本
    • deleteContentBackward           向后删除
    • deleteContentForward           向前删除

    event.dataTransfer

    返回一个 DataTransfer 实例。

    该属性只在文本框接受粘贴内容(insertFromPaste)拖拽内容(insertFromDrop)时才有效

     

    --------小尾巴 ________一个人欣赏-最后一朵颜色的消逝-忠诚于我的是·一颗叫做野的心.决不受人奴役.怒火中生的那一刻·终将结束...
  • 相关阅读:
    AngularJS方法 —— angular.bind
    rails 部署 nginx + passenger
    查找并删除
    rails 网站跨域
    From Ruby array to JS array in Rails- 'quote'?
    rails 网站字体
    form_tag
    bundle install 老是中断,可以在gemfile里面把source换成taobao源,可以自动安装
    ruby 功力修炼
    bootstrap 移动自适应界面
  • 原文地址:https://www.cnblogs.com/tianxiaxuange/p/10111142.html
Copyright © 2020-2023  润新知