对文本框的操作

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;width: 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');
<input id="i1" type="text" onfocus="Focus();" onblur="Blur();" value="请输入">
 
obj.setAttribute('name','fang');
undefined
obj=document.getElementById('i1');
<input id="i1" type="text" onfocus="Focus();" onblur="Blur();" value="请输入" name="fang">
obj.removeAttribute('name');
undefined
obj=document.getElementById('i1');
<input id="i1" type="text" onfocus="Focus();" onblur="Blur();" value="请输入">
 
属性操作
    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事件的操作

 

 
 
posted @ 2018-01-24 19:50  cerofang  阅读(154)  评论(0编辑  收藏  举报