• js-JavaScript高级程序设计学习笔记11


    依然第十四章

    1、选择部分文本:使用setSelectionRange()方法,两个参数为第一个字符的索引和最后一个字符之后的索引,类似于substring()方法。

    2、IE8及更早版本使用范围选择部分文本。

    3、通过阻止keypress的默认事件,可以屏蔽输出字符,使文本框变为只读。

    4、访问剪切板可以确保粘贴到文本框中的文本内容是符合要求的,不符合时可以阻止粘贴行为。

    5、HTML5约束验证API:

    1、必填字段:指定required属性

    2、其他输入类型:为input元素的type属性增加了几个值,不仅能够反映数据类型的信息,还提供了一些默认的验证功能。emailurl是两个得到支持最多的类型,不支持这些值的浏览器会自动将其设置为text。

    3、数值范围,number/range/datetime等,支持情况不好。可以指定min属性/max属性/step属性

    4、输入模式:pattern属性,是一个正则表达式,用于匹配文本框中的值。比如只能输入数值,则

    <input type="text" pattern="d+" name="count">

    模式的开头和结尾不用加^和$.

    5、检测有效性。使用checkValidity()方法检测表单中的某个字段是否有效,判断依据是上述四种方法。可对表单自身调用。validity属性会告诉你为什么字段有效或无效。P430

    6、禁止验证。表单添加noValidate属性表示不验证表单。给表单中的按钮添加formnovalidate属性表示点击按钮后不验证表单。

    6、选择框脚本

    1、选择框的value值的确定方法:

    ①如果没有选中的项,则选择框的value保存空字符串。

    ②如果有一个选中项,而且该项的value特性的值为空字符串,那么选择框的value为空字符串。

    ③选中项没有value特性,那么选择框的value等于选中项的文本。

    ④如果有多个选中项,根据前两条取第一个选中项的值。

    2、每个<option>元素都有一个HTMLOptionElement对象,属性有index/label/selected/text/value。不建议使用标准DOM方法取得option元素的文本和值

    3、获得单选框的选中项,可以使用选择框的selectedIndex属性。获取多选框的选中项,可以循环遍历选项集合,测试每一项的selected属性。

    4、添加选项

    //方法一,DOM方法
    var newOption=document.createElement("option");
    newOption.appendChild(document.createTextNode("Option text"));
    newOption.setAttribute("value","Option value");
    
    selectbox.appendChild(newOption);
    
    //方法二,使用Option构造函数,IE8及之前版本有问题。
    var newOption=new Option("Option text","Option value");
    selectbox.appendChild(newOption);
    
    //方法三,使用选择框的add()方法,最佳方案
    var newOption=new Option("Option text","Option value");
    selectbox.add(newOption,undefined);

    5、移除选项:①DOM的removeChild()方法,②选择框的remove()方法,接受一个参数,即要移除选项的索引。③将相应的选项设为null。要删除所有的,可以循环迭代remove(0)。

    6、移动和重排:使用appendChild()方法和insertBefore()方法。

    7、表单序列化P436

    8、富文本编辑,所见即所得。

    1、使用contenteditable属性,使得元素可编辑。

    P444

  • 相关阅读:
    Python startswith()函数 与 endswith函数
    Oracle spool 小结
    表空间(TableSpace)
    Python logger模块
    Mysql rpm安装
    Python json与pickle
    Python 生成器总结
    Python 装饰器的总结
    eclipse 乱码问题总结
    Eclipse 中出现红色下划波浪线与红色感叹号
  • 原文地址:https://www.cnblogs.com/zczhangcui/p/6137659.html
Copyright © 2020-2023  润新知