其中在前文提到了表单的基础知识,如下所示:
- 提交表单
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|富文本编辑
-
使用contenteditable属性 添加到对应的标签上面了 对应的元素就变成了textarea元素一样!
- true 打开
- false 关闭
- inherit 从父元素那里继承
操作富文本 document.execCommand()
三个参数： 要执行的命令的名称，表示浏览器是否为当前命令提供用户界面的一个布尔值，执行命令必须的一个值（如果不需要值，则为null）
- 表单与富文本 要想将富文本中的值传递给表单，则可在表单内创建一个隐藏的表单字段，将富文本的值赋给该表单字段的值
