码迷,mamicode.com
首页 > 其他好文 > 详细

学习第九天(2019-11-22)

时间:2019-11-22 23:48:55      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:lap   属性   war   dstat   start   UNC   query   oca   默认   

第十四章 表单脚本

一、表单的基础知识

   在HTML中,表单是由<form>元素来表示的,在JavaScript中,表单对应的是HTMLFormElement 类型。HTMLFormElement 继承了 HTMLElement,因而与其他HTML元素具有相同的默认属性。不过,HTMLFormElement有自己独有的属性和方法。 

   在javaScript中可以提交表单、重置表单以及操作表单的字段。

 下面是一个例子:

   假设有一个文本框,我们只允许用户输入数值。此时,可以利用 focus 事件修改文本框的背景颜色,以便更清楚地表明这个字段获得了焦点。可以利用 blur 事件恢复文本框的背景颜色,利用change事件在用户输入了非数值字符时再次修改背景颜色。

   实现代码:

 1 <html>
 2 <head>
 3 </head>
 4 <body>
 5      <form method="post" id="myForm">表单<br>
 6         <input type="text" size="20" maxlength="50" value="mytext">
 7      </form>
 8      <script type="text/javascript" src="myscript.js"></script>
 9 </body>
10 </html>
 1 var EventUtil = {
 2     addHandler: function(element,type,handler){
 3         if(element.addEventListener){
 4             element.addEventListener(type,handler,false);
 5         }else if(element.attachEvent){
 6             element.attachEvent("on"+type,handler);
 7         }else{
 8             element["on"+type]=handler;
 9         }
10     },
11     removeHandler: function(element,type,handler){
12         if(element.removeEventListener){
13             element.removeEventListene(type,handler,false);
14         }else if(element.detachEvent){
15             element.detachEvent("on"+type,handler);
16         }else{
17             element["on"+type] = null;
18         }
19     },
20     getEvent : function(event){
21         return event ? event : window.event;
22     },
23     getTarget:function(event){
24         return event.target||event.srcElement;
25     },
26     preventDefault:function(event){
27         if(event.preventDefault){
28             event.preventDefault();
29         }else{
30             event.returnValue=false;
31         }
32     },
33     stopPropagation:function(event){
34         if(event.stopPropagation){
35             event.stopPropagation();
36         }else{
37             event.cancelBubble=true;
38         }
39     }
40 };
41 
42 var textbox = document.forms[0].elements[0]; //取得text元素
43 
44 EventUtil.addHandler(textbox,"focus",function(event){ //当前字段获得焦点时触发
45     event = EventUtil.getEvent(event);
46     var target = EventUtil.getTarget(event);
47     if(target.style.backgroundColor!="red"){
48         target.style.backgroundColor = "yellow";
49     }
50     textbox.select();//选中文本框中的所有文本
51 });
52 EventUtil.addHandler(textbox,"blur",function(event){ //当前字段失去焦点时触发
53     event = EventUtil.getEvent(event);
54     var target = EventUtil.getTarget(event);
55     if(/[^\d]/.test(target.value)){ //为非数值时
56         target.style.backgroundColor = "red";
57     }else{
58         target.style.backgroundColor = "";
59     }
60 });
61 EventUtil.addHandler(textbox,"change",function(event){
62 //<input>和<textarea>元素,在它们失去焦点且value值改变时触发,对于<select>元素,在其选项改变时触发。 
63     event = EventUtil.getEvent(event);
64     var target = EventUtil.getTarget(event);
65     if(/[^\d]/.test(target.value)){
66         target.style.backgroundColor = "red";
67     }else{
68         target.style.backgroundColor = "";
69     }
70 });

 

二、文本框脚本

    在HTML中,有两种方式来表现文本框:一种是使用<input>元素的单行文本框,另一种是使用<textarea>的多行文本框。这两个控件非常相似,而且多数时候的行为也差不多。

  使用文本框可以用下面的代码:

<input type="text" size="25" maxlength="50" value="initial value">
<textarea rows="25" cols="5">initial value</textarea>  

  JavaScript中对文本框常见的操作有:选择文本、过滤输入、自动切换焦点等;

  下面的代码可以实现跨浏览器选择文本:

 1 function selectText(textbox,startIndex,stopIndex){
 2     if(textbox.setSelectionRange){
 3         textbox.setSelectionRange(startIndex,stopIndex);
 4     }else if(textbox.createTextRange){
 5         var range = textbox.createTextRange();
 6         range.collapse(true);
 7         range.moveStart("character",startIndex);
 8         range.moveEnd("character",stopIndex-startIndex);
 9         range.select();
10     }
11     textbox.focus();
12 }
13 
14 var textbox = document.forms[0].elements[0];
15 //设textbox.value="hello world!";
16 selectText(textbox,1,3); //"el"
17 selectText(textbox,2,7); //"llo w"

  

自动切换焦点:使用JavaScript可以从多个方面增强表单字段的易用性。其中,常见的一种方式就是在用户填写完当前字段时,自动将焦点切换到下一个字段。

 下面是一个例子:例如,美国的电话号码通常会分为三部分:区号、局号和另外4位数字。为取得完整的电话号码,很多网页中都会提供下列 3个文本框:

1 <input type="text" name="tel1" id="txtTel1" maxlength="3">
2 <input type="text" name="tel2" id="txtTel2" maxlength="3">
3 <input type="text" name="tel3" id="txtTel3" maxlength="4">

为增强易用性,同时加快数据输入,可以在前一个文本框中的字符达到大数量后,自动将焦点切换到下一个文本框。换句话说,用户在第一个文本框中输入了 3个数字之后,焦点就会切换到第二个文本框,再输入3个数字,焦点又会切换到第三个文本框。这种“自动切换焦点”的功能,可以通过下列代码实现:

 1 (function (){
 2     function tabForward(event){
 3         event = EventUtil.getEvent(event);
 4         var target = EventUtil.getTarget(event);
 5         if(target.value.length==target.maxLength){
 6             var form = target.form;
 7             for(var i=0, len=form.elements.length;i<len;i++){
 8                 if(form.elements[i+1]==target){
 9                     if(form.elements[i+1]){
10                         form.elements[i+1].focus();
11                     }  
12                     return;
13                 }
14             }
15         }
16     }
17     var textbox1 = document.getElementById("txtTel1");
18     var textbox2 = document.getElementById("txtTel2");
19     var textbox3 = document.getElementById("txtTel3");
20     EventUtil.addHandler(textbox1,"keyup",tabForward);
21     EventUtil.addHandler(textbox2,"keyup",tabForward);
22     EventUtil.addHandler(textbox3,"keyup",tabForward);
23 })();

 

三、选择框脚本

    选择框也是经常要通过JavaScript来控制的一个表单字段。由于有了 DOM,对选择框的操作比以前要方便多了。添加选项、移除选项、将选项从一个选择框移动到另一个选择框,甚至对选项进行排序等操作,都可以使用标准的DOM技术来实现。 

    以下面的选择框为例: 

1 <select name="location" id="selLocation">
2      <option value="Sunnyvale, CA">Sunnyvale</option>
3      <option value="Los Angeles, CA">Los Angeles</option>
4      <option value="Mountain View, CA">Mountain View</option>
5      <option value="">China</option>
6      <option>Australia</option>
7 </select> 
 1 function getSelectedOptions(selectbox){
 2     var result = new Array();
 3     var option = null; 
 4     for (var i=0, len=selectbox.options.length; i < len; i++){
 5          option = selectbox.options[i];
 6          if (option.selected){
 7              result.push(option);         
 8          }
 9     } 
10  return result; 
11 } 

这个函数返回给定选择框中选中项的一个数组。首先,创建一个将包含选中项的数组,然后使用 for 循环迭代所有选项,同时检测每一项的selected 属性。如果有选项被选中,则将其添加到 result 数组中。最后,返回包含选中项的数组。下面是一个使用上面的函数取得选中项的示例。 

1 var selectbox = document.getElementById("selLocation");
2 var selectedOptions = getSelectedOptions(selectbox);
3 var message = ""; 
4 for (var i=0, len=selectedOptions.length; i < len; i++){
5      message += "Selected index: " + selectedOptions[i].index +
6      "\nSelected text: " + selectedOptions[i].text +
7      "\nSelected value: " + selectedOptions[i].value + "\n\n";
8 } 
9 alert(message); 

在这个例子中,先从一个选择框中取得了选中项。然后,用 for 循环构建了一条消息,包含所有选中项的信息。这种技术适用于单选和多选选择框。 

 

四、富文本编辑

    富文本编辑功能是通过一个包含空 HTML文档的 iframe 元素来实现的。通过将空文档的designMode属性设置为"on",就可以将该页面转换为可编辑状态,此时其表现如同字处理软件。另外, 也可以将某个元素设置为contenteditable。在默认情况下,可以将字体加粗或者将文本转换为斜体,还可以使用剪贴板。

   JavaScript通过使用 execCommand()方法也可以实现相同的一些功能。另外,使用 queryCommandEnabled()、queryCommandState()和 queryCommandValue()方法则可以取得有关文本选区的信息。由于以这种方式构建的富文本编辑器并不是一个表单字段,因此在将其内容提交给服务器之前,必须将iframe或contenteditable元素中的HTML复制到一个表单字段中。 

 

 

 

学习第九天(2019-11-22)

标签:lap   属性   war   dstat   start   UNC   query   oca   默认   

原文地址:https://www.cnblogs.com/xiaoxb17/p/11914760.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!