对文本框的操作

DOM 中对输入文本框的操作，光标靠近时候清楚文本框中内容，当光标移动开后，文本框中内容自动显示

1，（ onfocus="Focus();" onblur="Blur();”）捕捉光标的两个js函数；

2. 　　var tag = document.getElementById('i1'); 函数中获取根据id获取标签中内容；

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div style="margin: 0 auto; 600px;background-color: blueviolet">
 9     <input id="i1" type="text" onfocus="Focus();" onblur="Blur();" value="请输入"/>
10 </div>
11 <script>
12     function Focus() {
13 //        console.log(1);
14         var tag = document.getElementById('i1');
15         var val = tag.value;
16         if (val == "请输入") {
17             tag.value = '';
18         }
19     }
20     function Blur() {
21 //        console.log(2);
22         var tag = document.getElementById('i1');
23         var val = tag.value;
24         if (val.length == 0) {
25             tag.value = '请输入'
26         }
27 
28     }
29 </script>
30 </body>
31 </html>

View Code

dom属性操作

console中对文本框中的style进行操作

obj=document.getElementById('i1');

obj.setAttribute('name','fang');

undefined

obj=document.getElementById('i1');

obj.removeAttribute('name');

undefined

obj=document.getElementById('i1');

属性操作

　　　　attributes

　　　　setAttribute

　　　　removeattribute

两种方法创建标签并添加到html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <input type="button" value="+" onclick="AddText1();">
 9 <input type="button" value="+" onclick="AddText2();">
10 <div id="i1">
11     <!--//创建一个input标签在p标签内部包裹着-->
12     <p><input type="text"/></p>
13 </div>
14 
15 <script>
16     //方法1：（字符串形式创建）直接创建一个被p标签包裹的input标签 加入到html中
17     function AddText1() {
18         var tag = "<p><input type='text'/></p>";
19         document.getElementById('i1').insertAdjacentHTML("beforeEnd", tag);
20     }
21 
22     //方法2：（以对象的方式）利用document创建一个input标签，为其添加style
23     // 创建一个p标签
24     // 将input标签加入到p标签中
25     function AddText2() {
26         var tag = document.createElement('input');
27         //给input标签添加style
28         tag.setAttribute('type', 'text');
29 //        tag.style.fontSize='16px';
30         var p = document.createElement('p');
31         //创建一个p标签
32         p.appendChild(tag);
33         //将input标签加入到创建的p标签中
34         document.getElementById('i1').appendChild(p);
35     }
36 
37 </script>
38 </body>
39 </html>

View Code

注意插入位置

1     function AddText1() {
2         var tag = "<p><input type='text'/></p>";
3         //第一个参数只能是'beforeBegin'      'afterBegin'    'beforeEnd'   'afterEnd'   
4         // 代表插入标签的插入位置
5         document.getElementById('i1').insertAdjacentHTML("beforeEnd", tag);
6     }

View Code

任何标签都可以通过与js搭配提交表单

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <form id="i1" action="https://www.baidu.com">
 9     <input type="text"/>
10     <!--<input type="submit" value="提交"/>-->
11     <div style="background-color: #2459a2" onclick="submitForm();">div提交</div>
12 </form>
13 <script>
14     function submitForm() {
15         document.getElementById('i1').submit();
16     }
17 </script>
18 </body>
19 </html>

View Code

setTimeout应用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div id="i1"></div>
 9 <input type="button" value="删除" onclick="Del();">
10 
11 <script>
12     function Del() {
13         document.getElementById('i1').innerText = '已删除';
14         setTimeout(function () {
15             document.getElementById('i1').innerText = '';
16         }, 2000)
17         //2s后自动将标签中的文本自动删除，且只执行一次
18     }
19 </script>
20 </body>
21 </html>

setTimeout

终止定时器

1     var timer1=setTimeout(function () {},5000);
2     clearTimeout(timer1);
3     
4     var timer2=setInterval(function () {},5000);
5     clearInterval(timer2);

终止定时器

Dom事件的操作

相关阅读:
gatekeeper学习概述
 通过浏览器下载服务器文件(日志)
Jetty启动配置解析
 java单元测试小结
 TCP重传机制的学习应用
 laravel安装笔记 (转)
TortoiseGit安装和使用的图文教程
 （转）HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
 PHP session 跨子域问题总结
 PHP session详解
原文地址：https://www.cnblogs.com/cerofang/p/8157610.html