By

文章目录
  1. 1. 表单基础知识
  2. 2. 文本框脚本
  3. 3. 选择框脚本
  4. 4. 表单序列化
  5. 5. 富文本编辑

    有时候真觉得欠缺的东西没有及时补充就会造成很大的麻烦而且之后还是要补上，其实也就是欠了的迟早要还啊。。。表单就是让我有深刻体验的一个。。。呜呜呜。。。。。。
以前的时候我看表单的操作，总感觉有各种属性，总是记不住，也不明白为什么，甚至是常有的DOM操作也总感觉是莫名其妙，今天突然豁然开朗。。。

以前我总是只看重DOM，没有真的理解DOM是个对象，对于表单也是这样，既然是这样那肯定是有属性的，也肯定是可以有方法的，所以可以像简单的对象一样去操作这些对象的属性，也就是这些对象比较大，有些自己内置的属性与方法。而且通过对这些对象的部分属性的赋值就可以产生自己想要的效果。总之就是要理解，DOM是个对象，form也是个对象。

表单基础知识

  1. form 是 HTMLFormElement类型，是继承HTMLElement的对象。所以除了正常HTML具有的属性之外，还有一些自己的属性。包括： action、elements、length、reset()、submit()、target等。

    elements: 是表单中所有控件的集合。
    length: 表单中控件的数量。

  2. 获取表单方法：

    和其他节点一样的方法

    1
    2
    var forms = document.forms;//获取所有表单
    var form =  document.forms["name"];//获取页面中名称是name的表单

  3. 表单元素（表单字段）,可以像访问页面中的其他元素一样，使用原生DOM方法去访问表单元素。每个表单都有elements属性，该属 性是表单中所有表单字元素的集合，这个elements集合是一个有序列表，其中包含着表单中的所有元素，顺序与在标记中的顺序相同，

    1
    2
    3
    4
    5
    var form= document.getElementById("form1");
    //取得表单中的第一个元素
    var field1 = form.elements[0];
    //取得name ="a"的字段
    var a = form.elements["a"];

  4. 共有的表单元素的属性

    disabled:当前字段是否禁用
    form : 当前字段所属表单的指针，只读
    name
    tabIndex:当前字段的切换序号
    type: 类型
    value: 当前字段将被提交给服务器的值

  5. 共有的表单元素的方法
    focus() 用于将浏览器的焦点设置到表单字段，即激活表单元素，使其可以响应键盘事件。在HTML5中autofocus字段可以自动把焦点 自动移动到相应字段。

    1
    2
    //将焦点设置到当前字段
    a.focus();

  6. 共有的表单元素事件

    blur: 当前字段失去焦点时触发
    change: input、textarea,在失去焦点并value值改变时触发，对于select，在其选项改变时触发。
    focus

文本框脚本

  1. input 元素 size 属性可以指定文本框中能够显示的字符数，maxlength 能接收的最大字符数；另一个文本框脚本是textarea;

  2. 选择文本

    select() :用于选择文本框中所有文本。在调用select()方法时也会触发select事件。
    取得选择的文本 : selectionStart 、selectionEnd两个属性
    选择部分文本：setSelectionRange()方法

  3. 屏蔽字符

    1
    2
    3
    4
    5
    6
    7
    8
    9
    EventUtil.addHandler(textbox,'keypress',function(event){
      // event = EventUtil.getEvent(event);
      var target = EventUtil.getTarget(event);
      var charCode = EventUtil.getCharCode(event);
      //在firefox中吗，所有由非字符键触发的keypress事件对应的字符编码为0,在Safari3之前的版本对应的字符编码全部为8
      if(!/\d/.test(String.fromCharCode(charCode))&&charCode > 9 && !event.ctrlKey){
        EventUtil.preventDefault(event);
      }
    })

  4. 操作剪贴板

  5. 自动切换焦点：当用户填写完当前字段时，自动将焦点切换到下一个字段。由于keyup事件会在用户输入了新字符之后触发，所以此时是检测文本框中内容长度的最佳时机。

  6. HTML5约束验证

    required : 必填字段

    1
    2
    3
    var isRequired = document.forms[0].elements["username"].required;
    //用来判断是否支持required属性
    var isRequiredSupported = 'required' in document.createElement("input");

    (1) 其他输入类型 type=”email” type=”url”、 number、range、datetime、datetime local、date、month、week、time.后面这几个支持并不怎么好。除此之外还有 min、max、step(刻度差值)。
    (2) 输入模式 pattern=”\d+”,正则 ，不用写^与$.
    (3) 检测有效性 checkValidity()方法可以检测表单中的某个字段是否有效，所有表单都有这个方法。还有各种判断哪种属性是否有效的方法。
    (4) 禁用验证 novalidate

选择框脚本

  1. 选择框是通过select与option创建的，HTMLSelectElement还有下面的属性与方法。

    add(newoption,reloption)
    multiple:是否允许多项选择
    options
    remove(index)
    selectedIndex: 索引号，多项时只保存第一项

HTMLOptionElement 对象的下列属性：

> index: 当前选项在options集合中的索引
> label
> selected:
> text
> value

  1. 选择选项

    1
    2
    3
    //单选
    var selectedOption = selectbox.options[selectbox.selectedIndex];
    //多选时遍历

  2. 添加选项

    1
    2
    var newoption = new Option("Option text","Option value");
    selectbox.add(newoption,index);//index = undefined 时插在最后

  3. 移除选项 remove(index)

  4. 移动和重排选项:将第一个选择框中的选项直接移动到第二个选择框中

    1
    2
    3
    4
    var selectbox1 = document.getElementById("select1");
    var selectbox2 = document.getElementById("select2");
    selectbox2.appendChild(selectbox1.options[0]);
    //还有insertBefore方法

表单序列化

  1. 对表单元素的名称和值进行URL编码，使用&分离
  2. 只发送勾选的复选框和单选按钮
  3. 不发送type 为”reset”和”button”按钮
  4. 禁用的不发

富文本编辑

  1. 富文本编辑：所见即所得
文章目录
  1. 1. 表单基础知识
  2. 2. 文本框脚本
  3. 3. 选择框脚本
  4. 4. 表单序列化
  5. 5. 富文本编辑