当前位置:Gxlcms > JavaScript > javascript中DOM的表单操作(附代码)

javascript中DOM的表单操作(附代码)

时间:2021-07-01 10:21:17 帮助过:5人阅读

DOM中的表单可以进行什么样的操作,操作的方法是什么?本篇文章就分享给大家javascript中DOM的表单操作,内容很详细,一起来看看吧。

1、获取表单

获取表单元素

以Document对象中forms属性来获取当前HTML页面所有表单集合
以Document对象中表单的name属性值来获取表单元元素

  1. <body>
  2. <form action="#">
  3. <input type="submit">
  4. </form>
  5. <form name="mylove" action="#">
  6. <input type="submit">
  7. </form>
  8. <script>
  9. console.log(document.forms);
  10. // 获取当前HTML页面所有表单元素
  11. console.log(document.mylove);
  12. // document表单名称-有些新浏览器是不支持
  13. </script>
  14. </body>

获取表单组件元素

以HTMLFormElement对象的elements属性来获取表单组件的集合

  1. <body>
  2. <form action="#">
  3. <input type="text" name="username">
  4. <input type="submit">
  5. </form>
  6. <script>
  7. var form = document.forms[0];
  8. console.log(form.elements);
  9. </script>
  10. </body>

2、表单操作

文本内容的选择

以HTMLElement对象和HTMLTextAreaElement对象中select()方法来获取文本框所有文本框的内容

  1. <body>
  2. <form action="#">
  3. <input type="text" id="username" value="请输入你用户名">
  4. <!---->
  5. <input type="submit">
  6. <!--定义提交按钮-->
  7. </form>
  8. <script>
  9. var username = document.getElementById(username);
  10. // 获取ID属性
  11. username.addEventListener('focus',function(){
  12. username.select();
  13. })
  14. username.addEventListener('select',function () {
  15. console.log(username.selectionStart.username.selectionEnd);
  16. var value = username.getAttribute('value');
  17. var result = value.substring(username.selectionStart,username.selectionEnd);
  18. console.log(result);
  19. })
  20. </script>
  21. </body>

设置文本内容

在HTML5新增中setSelectionRange()方法,来获取一个焦点文本框的文本内容

  1. body>
  2. <form action="#">
  3. <input type="text" id="username" value="请输入你用户名">
  4. <!---->
  5. <input type="submit">
  6. <!--定义提交按钮-->
  7. </form>
  8. <script>
  9. var username = document.getElementById(username);
  10. // 获取ID属性
  11. username.addEventListener('focus',function(){
  12. username.select();
  13. })
  14. username.addEventListener('select',function () {
  15. console.log(username.selectionStart.username.selectionEnd);
  16. var value = username.getAttribute('value');
  17. var result = value.substring(username.selectionStart,username.selectionEnd);
  18. console.log(result);
  19. })
  20. </script>
  21. </body>

操作剪切板

以copy;cut,paste 来设置 操作剪切板的复制,剪切和粘贴

  1. <body>
  2. <form action="#">
  3. <input type="text" id="username" value="请输入你用户名">
  4. <input type="text" id="username1">
  5. <input type="submit">
  6. </form>
  7. <script>
  8. var username = document.getElementById('username');
  9. username.addEventListener('copy',function (event) {
  10. var data = event.clipboardData || window.clipboardData;
  11. console.log(data);
  12. console.log('这是复制操作');
  13. var value = username.value;
  14. var result = value.substring(selectionStart,username.selectionEnd);
  15. console.log(result);
  16. data.setData('text',result);
  17. });
  18. username.addEventListener('cut',function () {
  19. console.log('这是个剪切操作');
  20. });
  21. var username1 = document.getElementById('username1');
  22. username1.addEventListener('paste',function (event) {
  23. event.preventDefault();
  24. var data = event.clipboardData || window.clipboardData;
  25. var result = data.getData('text');
  26. /*得到DataTransfer对象
  27. * geData()方法-获取数据内容*/
  28. if (result === '用户名') {
  29. result ='***';
  30. }
  31. username1.value = result;
  32. })
  33. </script>
  34. </body>

下拉列表的操作

是以select和option对象来创建病提供一些属性和方法

  1. <form action="#">
  2. <select id="yx">
  3. <option id="dj" value="dj">单机</option>
  4. <option value="wy">网页</option>
  5. <option value="dy">端游</option>
  6. </select>
  7. <select id="cyx1" multiple size="5">
  8. <option value="dj">单机</option>
  9. <option value="wy">网页</option>
  10. <option value="dy">端游</option>
  11. </select>
  12. </form>
  13. <script>
  14. var yx = document.getElementById('yx');
  15. // HTMLSelectElement对象
  16. console.log(yx.length);
  17. console.log(yx.options);
  18. console.log(yx.selectedIndex);// 被选中<option>的索引值
  19. // 属性
  20. var yx1 = document.getElementById('yx1');
  21. // size属性默认值是 0
  22. console.log(yx1.size);
  23. console.log(yx1.item(1));
  24. yx1.remove(2);
  25. var dj = document.getElementById('dj');
  26. console.log(dj.index);
  27. console.log(dj.selected);
  28. console.log(dj.text);
  29. console.log(dj.value);
  30. </script>

3、表单验证

以checkValidity()如元素值不存在验证问题,会是true,如不是则返回false
以setCustomValidity(message)会为元素自定义个错误信息,如果设置了,该元素未无效,并显示

  1. <body>
  2. <form action="#">
  3. <input type="text" id="username">
  4. <input type="submit">
  5. </form>
  6. <script>
  7. var username = document.getElementById('username');
  8. username.addEventListener('blur',function () {
  9. var value = username.value;
  10. if (value === '' || value === undefined || vaiue === null) {
  11. console.log('请输入你用户名');
  12. }
  13. });
  14. </script>
  15. </body>

4.表单提交

submit事件

以submit表示提交表单

  1. <body>
  2. <form action="#">
  3. <input type="text" id="username">
  4. <input type="submit">
  5. </form>
  6. <script>
  7. var form = document.forms[0];
  8. form.addEventListener('submit',function (event) {
  9. console.log('该表单已被提交');
  10. });
  11. </script>
  12. </body>

submit()方法

以submit表示提交表单,并用使用任意普通按钮即可完成提交

  1. <body>
  2. <form action="#">
  3. <input type="text" id="username">
  4. <input id="qyc" type="button" value="提交">
  5. </form>
  6. <script>
  7. var qyc = document.getElementById('qyc');
  8. qyc.addEventListener('click',function () {
  9. var form = document.forms[0];
  10. form.submit();//提交表单
  11. });
  12. </script>
  13. </body>

相关推荐:

JavaScript和jQuery的DOM操作

JavaScript DOM的本质及操作方法

以上就是javascript中DOM的表单操作(附代码)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行