- 提交标签button也行(在form里面)
<button type="submit">我是提交</button> <button type="reset">我是重置</button>
- 获取表单的四种方式
<form action="" id="a" name="form1"> <input type="text" value="123465"> </form> <script> let forms=document.forms; console.log(document.querySelector('form')); console.log(forms[0]); console.log(forms['a']); console.log(forms['form1']); </script>
- 获取表单元素
<form id="from1" name="a" action=""> <input type="text" size="5" maxlength="10"> <input type="radio" name="danxuan"> <input type="radio" disabled name="danxuan"> <input type="radio" name="danxuan"> <input type="submit"> </form>
console.log(document.forms[0].elements[2])//获取一个dom console.log(document.forms[0].elements.danxuan)//获取单选dom集合
- 文本输入框input type=text ;teaxtarea
forms[0].elements[0].select();文本选择 (只能在同一时刻选择一处文本)
获取选择的文本内容
forms[0].elements[1].select(); let ele=forms[0].elements[1]; console.log( ele.selectionStart);//开始选择位置 console.log( ele.selectionEnd);//结束选择位置 console.log(ele.value.slice(ele.selectionStart,ele.selectionEnd))forms[0].elements[1].focus();
forms[0].elements[1].setSelectionRange(1,6);//设置选择的位置(但是没有选中的状态)这句之前必须先表单选中 - 输入过滤与复制相关事件
let inp=document.querySelector('input'); inp.onkeypress=function (e) { /* 可扩展成只能输入数字 * */ // e.preventDefault();//阻止用户输入 console.log(1) } /* *文本框复制粘贴相关 * * */ inp.onselect=function(){ console.log('选择时') }; inp.onbeforecopy=function () { console.log('复制之前'); }; inp.oncopy=function () { console.log('复制时'); } inp.onbeforecut=function () { console.log('剪切前'); } inp.oncut=function () { console.log('剪切后'); } inp.onbeforepaste=function () { console.log('粘贴前'); } inp.onpaste=function () { console.log('粘贴时'); }
- H5表单验证
<input type="text" maxlength="3" required> //必填 <input type="text" maxlength="4" pattern="add"> //pattern=正则验证规则