14|表单脚本

其中在前文提到了表单的基础知识,如下所示:

• 提交表单

let form = document.getElementById("myForm");
form.submit();

• 重置表单

let form = document.getElementById("myForm");
form.reset();

• 表单字段

01|文本框脚本

• 选择文本可以使用inputElement.select() 在文本框时候选择其所有的文本! 不接受参数可以在任何时候调用!

• 选择事件 select事件

• 取得选择的文本

const getSelectedText = textbox=>{
    if(typeof textbox.selectionStart === "number"){
        return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
    }else if(document.selection){
        return document.selection.createRange().text;
    }
}

• 选择部分文本

其中选择部分文本的话则需要调用 setSelectionRange(startIndex,endIndex)

textbox.setSelectionRange(startIndex,endIndex);

• 过滤事件

// 通过阻止键盘按压事件的默认行为来屏蔽字符
el.addEvent("keypress",function(event){
    let charCode = event.charCode;
    // String.fromCharCode(charCode) 将字符编码转换为字符串
    if(!/\d/.test(String.fromCharCode(charCode))){
        event.preventDefault();
    }
}, false)

02|富文本编辑

1. 使用contenteditable属性 添加到对应的标签上面了 对应的元素就变成了textarea元素一样!

   1. true 打开
   2. false 关闭
   3. inherit 从父元素那里继承

2. 操作富文本 document.execCommand()

三个参数： 要执行的命令的名称，表示浏览器是否为当前命令提供用户界面的一个布尔值，执行命令必须的一个值（如果不需要值，则为null）

3. 表单与富文本 要想将富文本中的值传递给表单，则可在表单内创建一个隐藏的表单字段，将富文本的值赋给该表单字段的值