时间:2021-07-01 10:21:17 帮助过:5人阅读
1、获取表单
获取表单元素
以Document对象中forms属性来获取当前HTML页面所有表单集合
以Document对象中表单的name属性值来获取表单元元素
- <body>
- <form action="#">
- <input type="submit">
- </form>
- <form name="mylove" action="#">
- <input type="submit">
- </form>
- <script>
- console.log(document.forms);
- // 获取当前HTML页面所有表单元素
- console.log(document.mylove);
- // document表单名称-有些新浏览器是不支持
- </script>
- </body>
获取表单组件元素
以HTMLFormElement对象的elements属性来获取表单组件的集合
- <body>
- <form action="#">
- <input type="text" name="username">
- <input type="submit">
- </form>
- <script>
- var form = document.forms[0];
- console.log(form.elements);
- </script>
- </body>
2、表单操作
文本内容的选择
以HTMLElement对象和HTMLTextAreaElement对象中select()方法来获取文本框所有文本框的内容
- <body>
- <form action="#">
- <input type="text" id="username" value="请输入你用户名">
- <!---->
- <input type="submit">
- <!--定义提交按钮-->
- </form>
- <script>
- var username = document.getElementById(username);
- // 获取ID属性
- username.addEventListener('focus',function(){
- username.select();
- })
- username.addEventListener('select',function () {
- console.log(username.selectionStart.username.selectionEnd);
- var value = username.getAttribute('value');
- var result = value.substring(username.selectionStart,username.selectionEnd);
- console.log(result);
- })
- </script>
- </body>
设置文本内容
在HTML5新增中setSelectionRange()方法,来获取一个焦点文本框的文本内容
- body>
- <form action="#">
- <input type="text" id="username" value="请输入你用户名">
- <!---->
- <input type="submit">
- <!--定义提交按钮-->
- </form>
- <script>
- var username = document.getElementById(username);
- // 获取ID属性
- username.addEventListener('focus',function(){
- username.select();
- })
- username.addEventListener('select',function () {
- console.log(username.selectionStart.username.selectionEnd);
- var value = username.getAttribute('value');
- var result = value.substring(username.selectionStart,username.selectionEnd);
- console.log(result);
- })
- </script>
- </body>
操作剪切板
以copy;cut,paste 来设置 操作剪切板的复制,剪切和粘贴
- <body>
- <form action="#">
- <input type="text" id="username" value="请输入你用户名">
- <input type="text" id="username1">
- <input type="submit">
- </form>
- <script>
- var username = document.getElementById('username');
- username.addEventListener('copy',function (event) {
- var data = event.clipboardData || window.clipboardData;
- console.log(data);
- console.log('这是复制操作');
- var value = username.value;
- var result = value.substring(selectionStart,username.selectionEnd);
- console.log(result);
- data.setData('text',result);
- });
- username.addEventListener('cut',function () {
- console.log('这是个剪切操作');
- });
- var username1 = document.getElementById('username1');
- username1.addEventListener('paste',function (event) {
- event.preventDefault();
- var data = event.clipboardData || window.clipboardData;
- var result = data.getData('text');
- /*得到DataTransfer对象
- * geData()方法-获取数据内容*/
- if (result === '用户名') {
- result ='***';
- }
- username1.value = result;
- })
- </script>
- </body>
下拉列表的操作
是以select和option对象来创建病提供一些属性和方法
- <form action="#">
- <select id="yx">
- <option id="dj" value="dj">单机</option>
- <option value="wy">网页</option>
- <option value="dy">端游</option>
- </select>
- <select id="cyx1" multiple size="5">
- <option value="dj">单机</option>
- <option value="wy">网页</option>
- <option value="dy">端游</option>
- </select>
- </form>
- <script>
- var yx = document.getElementById('yx');
- // HTMLSelectElement对象
- console.log(yx.length);
- console.log(yx.options);
- console.log(yx.selectedIndex);// 被选中<option>的索引值
- // 属性
- var yx1 = document.getElementById('yx1');
- // size属性默认值是 0
- console.log(yx1.size);
- console.log(yx1.item(1));
- yx1.remove(2);
- var dj = document.getElementById('dj');
- console.log(dj.index);
- console.log(dj.selected);
- console.log(dj.text);
- console.log(dj.value);
- </script>
3、表单验证
以checkValidity()如元素值不存在验证问题,会是true,如不是则返回false
以setCustomValidity(message)会为元素自定义个错误信息,如果设置了,该元素未无效,并显示
- <body>
- <form action="#">
- <input type="text" id="username">
- <input type="submit">
- </form>
- <script>
- var username = document.getElementById('username');
- username.addEventListener('blur',function () {
- var value = username.value;
- if (value === '' || value === undefined || vaiue === null) {
- console.log('请输入你用户名');
- }
- });
- </script>
- </body>
4.表单提交
submit事件
以submit表示提交表单
- <body>
- <form action="#">
- <input type="text" id="username">
- <input type="submit">
- </form>
- <script>
- var form = document.forms[0];
- form.addEventListener('submit',function (event) {
- console.log('该表单已被提交');
- });
- </script>
- </body>
submit()方法
以submit表示提交表单,并用使用任意普通按钮即可完成提交
- <body>
- <form action="#">
- <input type="text" id="username">
- <input id="qyc" type="button" value="提交">
- </form>
- <script>
- var qyc = document.getElementById('qyc');
- qyc.addEventListener('click',function () {
- var form = document.forms[0];
- form.submit();//提交表单
- });
- </script>
- </body>
相关推荐:
JavaScript和jQuery的DOM操作
JavaScript DOM的本质及操作方法
以上就是javascript中DOM的表单操作(附代码)的详细内容,更多请关注Gxl网其它相关文章!