《JavaScript高级程序设计》笔记:表单脚本(十四)

时间:2022-08-10 20:05:24

表单的基础知识

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

  • acceptCharset:服务器能够处理的字符集;等价于HTML中的accept-charset特性。
  • action:接受请求的URL;等价于HTML中的action特性。
  • elements:表单中所有控件的集合。
  • enctype:请求的编码类型;等价于HTML中的enctype特性。
  • length:表单中控件的数量。
  • method:要发送的http请求类型,通常是"get"或“post”;等价于HTML中method特性。
  • name:表单的名称;等价于HTML的name特性。
  • reset():将所有表单域重置为默认值。
  • submit():提交表单。
  • target:用于发送请求和接收响应的窗口名称;等价于HTML中的target特性。

取得form元素引用的几种方式,方式一:

var form = document.getElementById('form1');

方式二:

通过document.forms可以取得页面中的所有表单。在这个集合中,可以通过索引或者name值来取得特定的表单。

var firstForm = document.forms[0]; //取得页面中的第一个表单
var myForm = document.forms['form1']; //取得页面中名为"form1"的表单

提交与重置表单

阻止表单提交:

var form = document.getElementById('myForm');

//使用13章封装的EventUtil对象
EventUtil.addHandler(form,'submit',function(event){ //取得事件对象
event = EventUtil.getEvent(event); //阻止默认事件(取消表单的提交)
event.preventDefault(event);
})

提交与重置:

var form = document.getElementById('myForm');
//提交表单
form.submit(); //重置表单
form.reset();

表单字段

每个表单都有elements属性,该属性是所有表单中所有元素的集合。

var form = document.getElementById('myForm');

//取得表单中的第一个字段
var field1 = form.elements[0]; //取得名为"textbox1"的字段
var field2 = form.elements['textbox1']; //取得表单中包含的字段的数量
var fieldCount = form.elements.length;

如果有多个表单控件都在使用同一个name(比如单选按钮),那么就会返回以该name命名的一个nodeList。

表单字段共有的属性和方法:

  • disabled:布尔值,表示当前字段是否被禁用。
  • form:指向当前字段所属表单的指针;只读。
  • name:当前字段的名称。
  • readOnly:布尔值,表示当前字段是否只读。
  • tabIndex:表示当前字段的切换(tab)序号。
  • type:当前字段的类型,如“checkbox”、“radio”等。
  • value:当前字段被提交到服务器的值。

除了form属性之外,可以通过JS动态修改其它任何属性。

var form = document.getElementById('myForm');
var field = form.elements[0]; //修改value属性
field.value = "Another value"; //检查form属性的值
console.log(field.form == form); //把焦点设置到当前字段
field.focus(); //禁用当前字段
field.disabled = true; //修改type属性(不推荐,但对<input>来说是可行的)
field.type ="checkbox";

避免多次提交表单,在第一次点击提交表单后,设置提交按钮disabled为true,如下代码:

var form = document.getElementById('myForm');

//避免多次提交表单
EventUtil.addHandler(form,"submit",function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event); //取得提交按钮
var btn = target.elements['submit-btn']; //禁用它
btn.disabled = true; //后面代码省略
})

每个表单字段都有两个方法:focus()和blur()。例如,在页面加载完成后,把焦点转移到表单中的第一个字段,如下代码:

EventUtil.addHandler(window,"load",function(event){
document.forms[0].elements[0].focus();
})

注意,如果第一个表单字段是<input>元素,且它的type特性的值为“hidden”,那么以上代码会发生错误(高版本浏览器升级修复了该问题)。

HTML5为表单字段新增加了一个autofocus属性。

<input type="text"  autofocus/>

检测浏览器是否支持该属性:

EventUtil.addHandler(window,"load",function(event){
var element = document.forms[0].elements[0];
if(element.autofocus !== true){
element.focus();
console.log("JS focus");
}
})

所有表单都支持focus(),change(),blur()这三个事件。如下例子:

var textbox = document.forms[0].elements[0];
EventUtil.addHandler(textbox,"focus",function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if(target.style.background != 'red'){
target.style.background = 'yellow';
}
});
EventUtil.addHandler(textbox,"blur",function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if(/[^\d]/.test(target.value)){
target.style.background = 'red';
}else{
target.style.background = '';
}
});
EventUtil.addHandler(textbox,"change",function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
console.log(target.value)
if(/[^\d]/.test(target.value)){
target.style.background = 'red';
}else{
target.style.background = '';
}
})

文本框脚本

两种方式表示文本框:<input>和<textarea>。

<input>文本框,通过设置size属性,可以指定文本框中显示的字符数。通过设置value特性,可以设置文本框默认的初始值。而maxLength用于指定文本框可以接受的最大字符数。

<input type="text" size="20" value="init value" maxlength="50"/>

对于<textarea>多行文本框而言,要指定文本框的大小,通过设置rows(指定文本框的字符行数)和cols(指定文本框的字符列数)。<textarea>的初始值必须放在<textarea>与</textarea>之间。

<textarea rows="25" cols="5"> init vaule</textarea>

选择文本

上述两种文本框都支持select()方法,这个方法用于选择文本框中的所有文本。

var textbox = document.forms[0].elements["textbox"];
textbox.select();

文本框获得焦点,选择其中所有文本,代码如下:

var textbox = document.forms[0].elements["textbox"];
EventUtil.addHandler(textbox,"focus",function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
target.select();
})

1.选择(select)事件

与select()方法对应的是一个select事件。在选择了文本框的文本时,就会触发select事件。不过到底什么时候触发select事件,还会因浏览器而异。在IE9以及其它高版本浏览器中,当用户选择了文本(而且要释放鼠标),才会触发select事件。而在IE8以及更早的版本中,只要用户选择了一个字母(不必释放鼠标),就会触发select事件。另外,在调用select()方法时也会触发select事件。如下代码:

var textbox = document.forms[0].elements["textbox"];
EventUtil.addHandler(textbox,"select",function(event){
console.log("Text selected:" + textbox.value);
})

2.取得选择的文本

虽然select事件知道用户什么时候选择了文本,但是不知道用户选择了什么文本。HTML5规范为此添加了两个属性:selectionStart和selectionEnd。这两个属性保存的是基于0的数值,表示所选择文本的范围(即文本选区开头和结尾的偏移量)。

function getSelectedText(textbox){
return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
}
var textbox = document.forms[0].elements["textbox"];
EventUtil.addHandler(textbox,"select",function(event){
console.log("Text selected:" + getSelectedText(textbox));
})

IE8及之前的版本不支持这两个属性,有一个document.selection对象,其中保存着用户在整个文档范围内选择的文本信息;也就是说,无法确认用户选择的是页面中哪个部位的文本。不过在和select事件一起使用的时候,可以假定是用户选择了文本框中的文本,因而触发了该事件。要取得选中的文本,首先必须创建一个范围,然后将文本从其中提取出来。代码如下:

function getSelectedText(textbox){
if(typeof textbox.selectionStart == 'number'){
return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
}else if(document.selection){
document.selection.createRange().text;
}
}

3.选择部分文本

HTML5也为选择文本框中的部分文本提供了解决方案,即setSelectionRange(),这个方法接受两个参数:要选择第一个字符的索引和要选择最后一个字符之后的字符索引(类似与substring的两个参数),如下例子:

textbox.value = "Hello world!";
//选择所有文本
textbox.setSelectionRange(0,textbox.value.length); //Hello world! //选择前3个字符
textbox.setSelectionRange(0,3); //Hel //选择第4到第6个字符
textbox.setSelectionRange(4,7); //o w textbox.focus();

要看到选中的文本,必须在调用setSelectionRange()之前或之后立即将焦点设置到文本框。IE9以及其它高版本支持这种方案。

IE8以及更早版本支持使用范围选择部分文本。要选择文本框中的部分文本,必须首先使用IE在所有文本框上提供的createTextRange()方法创建一个范围,并将其放到恰当的位置上。然后再使用moveStart()和moveEnd()这两个范围方法将范围移动到位。不过,在调用这两个方法之前,还必须使用collapse()将范围折叠到文本框的开始位置。此时,moveStart()将范围的起点和终点移动到了相同的位置,只要再给moveEnd()传入要选择的字符总数即可。最后一步,就是使用范围的select()方法选择文本。代码如下:

textbox.value = "Hello world!";

var range = textbox.createTextRange();

//选择所有文本
range.collapse(true);
range.moveStart("character",0);
range.moveEnd("character",textbox.value.length);//Hello world!
range.select(); //选择前3个字符
range.collapse(true);
range.moveStart("character",0);
range.moveEnd("character",3);//hel
range.select(); //选择第4到第6个字符
range.collapse(true);
range.moveStart("character",4);
range.moveEnd("character",3);//hel
range.select();

跨浏览器:

function selectText(textbox,startIndex,stopIndex){
if(textbox.setSelectionRange){
textbox.setSelectionRange(startIndex,stopIndex);
}else if(textbox.createTextRange){
var range = textbox.createTextRange();
range.collapse(true);
range.moveStart("character",startIndex);
range.moveEnd("character",stopIndex-startIndex);
range.select();
}
textbox.focus();
}

过滤输入

1.屏蔽字符

EventUtil.addHandler(textbox,"keypress",function(event){
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
})

注:上面代码能屏蔽英文字符,但是不能屏蔽中文汉字。

只允许用户输入数值:

EventUtil.addHandler(textbox,"keypress",function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var charCode = EventUtil.getCharCode(event);
if(!/\d/.test(String.fromCharCode(charCode))){
EventUtil.preventDefault(event);
}
})

虽然理论上只有在用户按下字符键时才会触发keypress事件,但有些浏览器也会对其它键触发此事件。Firefox和Safari(3.1版本以前)会对向上键、向下键、退格键和删除键触发keypress事件。这就意味着,仅考虑到屏蔽不是数值的字符还是不够,还要避免屏蔽这些极为常见和必要的键。在Firefox中,所有由非字符键触发的keypress事件对应的字符编码为0,而在Safari3.1以前的版本中,对应的字符编码全部为8。为了让代码更通用,只要不屏蔽那些字符编码小于10的键即可,故上面代码变为如下:

EventUtil.addHandler(textbox,"keypress",function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var charCode = EventUtil.getCharCode(event);
if(!/\d/.test(String.fromCharCode(charCode)) && charCode > 9){
EventUtil.preventDefault(event);
}
})

上面代码可以屏蔽非数值字符,但不屏蔽那些也会触发keypress事件的基本按键。

还有一个问题需要处理:复制、粘贴以及其它操作还要用到ctrl键,最后还有一个检测,以确保用户没有按下ctrl键,代码如下:

EventUtil.addHandler(textbox,"keypress",function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var charCode = EventUtil.getCharCode(event);
if(!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 && !event.ctrlKey){
EventUtil.preventDefault(event);
}
})

2.操作剪贴板

HTML5的6个剪贴板事件。

  • beforecopy:在发生复制操作前触发。
  • copy:在发生复制操作时触发。
  • beforecut:在发生剪切操作前触发。
  • cut:在发生剪切操作时触发。
  • beforepaste:在发生粘贴操作前触发。
  • paste:在发生粘贴操作时触发。

在实际的事件发生前,通过beforecopy、beforecut和beforepaste事件可以在向粘贴板发送数据,或者从剪贴板取得数据之前修改数据。不过,取消这些事件并不会取消对剪贴板的操作,只有取消copy、cut和paste事件,才能阻止相应的操作发生。

要访问剪贴板中的数据,可以使用clipboardData对象;在IE中,这个对象是window对象的属性;而在Firefox、Safari和Chrome中,这个对象是相应的event对象的属性。但是,在Firefox、Safari和Chrome中,只有在处理剪贴板事件期间clipboardData对象才有效,这是为了防止对剪贴板的未授权访问;在IE中,则可以随时访问clipboardData对象。

这个clipboardData对象有三个方法:getData()、setData()和clearData()。

getData():从剪贴板中取得数据,接受一个参数,即要取得的数据的格式。在IE中,有两种数据格式,“text”和“URL”。在Firefox、Safari和Chrome中,这个参数是一个MIME类型;不过,可以用“text”代表“text/plain”。

setData():第一个参数也是数据类型,第二参数是放到剪贴板中的文本。对于第一个参数IE照样支持“text”和“URL”。而在Safari和Chrome中,这个参数仍然只支持MIME类型。但是与getData()方法不同的是,Safari和Chrome的setData()方法不能识别“text”类型。这两个浏览器在成功将文本放到剪贴板后,都会返回true,否则返回false。为了弥合这些差异,可以向EventUtil对象中添加下列方法:

var EventUtil = {

    //省略的代码

    //得到剪贴板数据
getClipboardData:function(event){
var clipboardData = (event.clipboardData || window.clipboardData);
return clipboardData.getData("text");
}, //设置剪贴板数据
setClipboardData:function(event,value){
if(event.clipboardData){
return event.clipboardData.setData("text/plain",value);
}else if(window.clipboardData){
return window.clipboardData.setData("text",value);
}
}
};

在paste事件中,确定剪贴板中的数据是否有效,如果无效,取消默认行为,如下代码,如果不是数字,则取消粘贴:

var textbox = document.forms[0].elements["textbox"];
EventUtil.addHandler(textbox,"paste",function(event){
event = EventUtil.getEvent(event);
var text = EventUtil.getClipboardData(event);
if(!/^\d*$/.test(text)){
EventUtil.preventDefault(event);
}
})

自动切换焦点

html:

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

JS代码:

(function(){
function tabForward(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if(target.value.length == target.maxLength){
var form = target.form;
for(var i=0, len = form.elements.length; i < len; i++){
if(form.elements[i] == target){
if(form.elements[i+1]){
form.elements[i+1].focus();
}
return;
}
}
}
} var textbox1 = document.getElementById('txtTel1');
var textbox2 = document.getElementById('txtTel2');
var textbox3 = document.getElementById('txtTel3'); EventUtil.addHandler(textbox1,"keyup",tabForward);
EventUtil.addHandler(textbox2,"keyup",tabForward);
EventUtil.addHandler(textbox3,"keyup",tabForward);
})();

HTML5约束验证API

1.必填字段

在表单字段中添加required属性。

<form>
<input type="text" name="text" id="myText" required/>
<input type="submit" value="提交"/>
</form>

JS检测某个表单字段是否为必填字段:

var isUernameRequired = document.forms[0].elements['username'].required;

使用下面这段代码可以测试浏览器是否支持required属性:

var isRequiredSupported = "required" in document.createElement("input");

2.其他输入类型

HTML5为<input>元素的type值新添了几个值。其中“email”和“url”是两个得到支持最多的类型,如下代码:

<form>
<input type="email" name="email" required/>
<input type="url" name="url" required/>
<input type="submit" value="提交"/>
</form>

检测浏览器是否支持这些新类型,不支持它们的旧版本浏览器会自动将未知的值设置为“text”,而支持的浏览器会返回正确的值。例如:

var input = document.createElement("input");
input.type ="email"; var isEmailSupported = (input.type == "email");

3.数值范围

number、range、datetime、datetime-local、date、month、week、time。

对于这些数值类型的输入元素,可以指定min属性(最小的可能值)、max属性(最大的可能值)和step属性(从min到max的两个刻度之间的差值)。

例如,想用户输入0到100的值,并且只能是5的倍数,代码如下:

<input type="number" min="0" max="100" step="5" name="acount"/>

还有两个方法stepUp()和stepDown(),还没有任何浏览器支持,使用如下:

input.stepUp();//加1
input.stepUp(6);//加6
input.stepDown();//减1
input.stepDown(6);//减6

4.输入模式

HTML5为文本字段新增了pattern属性。这个属性的值是一个正则表达式,用于匹配文本框中的值。如下,只运行文本输入数字,代码如下:

<input type="number" pattern="\d+" name="acount"/>

注意,模式的开头和结尾不用加^和$符号。

检测浏览器是否支持pattern属性:

var isPatternSupported = "pattern" in document.createElement("input");

5.检测有效性

使用checkValidity()方法可以检测整个表单,也可以检测某个表单字段。

//检测具体的某个表单字段
if(document.forms[0].elements[0].checkValidity()){
alert("有效的值");
}else{
alert("无效的值");
} //检测整个表单
if(document.forms[0].checkValidity()){
alert("表单有效");
}else{
alert("表单无效");
}

6.禁用验证

通过设置novalidate属性,告诉表单不进行验证。

<form method="post" action="signup.php" novalidate>
<!--这里插入表单元素-->
</form>

在JS中使用noValidate属性可以取得或设置这个值,如果这个属性存在,值为true,不存在则为false。

document.forms[0].noValidate = true; //禁用验证

如果一个表单中有多个提交按钮,可以指定某个提交按钮不必验证表单,可以在相应的按钮上添加formnovalidate属性。

<form method="post" action="foo.php">
<!--这里插入表单元素-->
<input type="submit" value="Regular Submit"/>
<input type="submit" formnovalidate name="btnNovalidate" value="Non-validating Submit"/>
</form>

使用JS设置这个属性:

document.forms[0].elements['btnNovalidate'].formNoValidate = true; //禁用验证

选择框脚本

选择框是通过<select>和<option>元素创建的。除了所有表单字段共有的属性和方法外,HTMLSelectElement类型还提供了下列属性和方法。

  • add(newOption,relOption):向控件中插入新<option>元素,其位置在相关项(relOption)之前。
  • multiple:布尔值,表示是否允许多项选择;等价于HTML中的multiple特性。
  • options:控件中所有<option>元素的HTMLCollection。
  • remove(index):移除给定位置的选项。
  • selectedIndex:基于0的选中项的索引,如果没有选中项,则值为-1。对于支持多选的控件,只保存选中项中第一项的索引。
  • size:选择框中可见的行数;等价于HTML中的size特性。

选择框的type属性不是“select-one”,就是“select-multiple”。这取决于HTML代码中有没有multiple特性。

在DOM中,每个<option>元素都有一个HTMLOptionElement对象。为便于访问数据,HTMLOptionElement对象添加了下列属性:

  • index:当前选项在options集合中的索引。
  • label:当前选项的标签;等价于HTML中的label特性。
  • selected:布尔值,表示当前选项是否被选中。将这个属性设置为true可以选中当前选项。
  • text:选项的文本。
  • value:选项的值(等价于HTML中的value特性)。

如下代码,HTML:

<form>
<select name="location">
<option value="1">北京</option>
<option value="2">天津</option>
<option value="3">上海</option>
</select>
</form>

JS代码:

var selectbox = document.forms[0].elements['location'];
var text = selectbox.options[0].text; //选项的文本
var value = selectbox.options[0].value;//选项的值

选择选项

使用选择框的selectedIndex属性。如上面代码默认选中了天津。

var selectbox = document.forms[0].elements['location'];
var selectOption = selectbox.options[selectbox.selectedIndex];

选中选择框的第一项:

selectbox.options[0].selected = true;

多选下,取得所有选中的项:

function getSelectedOptions(selectbox){
var result = new Array();
var option = null;
for(var i =0, len = selectbox.options.length; i < len; i++){
option = selectbox.options[i];
if(option.selected){
result.push(option);
}
}
return result;
}
var selectbox = document.forms[0].elements['location'];
getSelectedOptions(selectbox);

添加选项

第一种,DOM方式添加:

var selectbox = document.forms[0].elements['location'];
var newoption = document.createElement('option');
newoption.appendChild(document.createTextNode('Option text'));
newoption.setAttribute('value',"option value");
selectbox.appendChild(newoption);

第二种方式,使用Option构造函数,Option构造函数接受两个参数:文本(text)和值(value),第二个参数可选。虽然这个构造函数会创建一个Option实例,但兼容DOM的浏览器会返回一个<option>元素。如下代码:

var selectbox = document.forms[0].elements['location'];
var newoption = new Option("Option text","option value");
selectbox.appendChild(newoption); //在IE8以及之前版本有问题

第三种方式使用选择框的add()方法。该方法接受两个参数:要添加的新选项和将位于新选项之后的选项。

var selectbox = document.forms[0].elements['location'];
var newoption = new Option("Option text","option value");
selectbox.add(newoption,undefined);

移除选项

三种方式如下:

var selectbox = document.forms[0].elements['location'];

//removeChild()传入要移除的选项
selectbox.removeChild(selectbox.options[0]); //移除第一个选项 //remove(index)传入移除项的索引
selectbox.remove(0); //移除第一个选项 //将相应选项设置为null
selectbox.options[0] = null;//移除第一个选项

清除选择框所有的项:

function clearSelectBox(selectbox){
for(var i=0 ,len=selectbox.options.length; i < len; i++){
selectbox.remove(i);
}
}

移动和重排选项

将第一个选择框中的第一个选项移动到第二选择框中,代码如下:

var selectbox1 = document.getElementById('location1');
var selectbox2 = document.getElementById('location2');
selectbox2.appendChild(selectbox1.options[0]);

移动选项和移除选项有一个共同之处,即会重置每一个选项的index属性。

要将选择框中的某一项移动到特定的位置,最适合的DOM方法insertBefore()。

var optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index - 1]);

将选择框中的选项向后移动一个位置:

var optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index + 2]);

表单序列化

在编写代码之前,有必须先搞清楚在表单提交期间,浏览器是怎样将数据发送给服务器的。

  • 对表单字段的名称和值进行URL编码,使用和号(&)分隔。
  • 不发送禁用的表单字段。
  • 只发送勾选的复选框和单选按钮。
  • 不发送type为“reset”和“button”的按钮。
  • 多选选择框的每个选中的值单独一个条目。
  • 在单击提交按钮提交表单的情况下,也会发送提交按钮;否则,不发送提交按钮。也包括type为“image”的<input>元素。
  • <select>元素的值,就是选中的<option>元素的value特性的值。如果<option>元素没有value特性,则是<option>元素的文本值。

表单序列化代码:

function serialize(form){
var parts = [],
field = null,
i,
len,
j,
optLen,
option,
optValue;
for(i = 0,len = form.elements.length; i < len; i++){
field = form.elements[i];
switch(field.type){
case "select-one":
case "select-multiple":
if(field.name.length){
for(j =0, optLen = field.options.length; j < optLen; j++){
option = field.options[i];
if(option.selected){
optValue = "";
if(option.hasAttribute){
optValue = (option.hasAttribute("value") ? option.value:option.text);
}else{
optValue = (option.attributes['value'].specified ? option.value:option.text);
}
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
}
}
}
break;
case undefined: //字段集
case "file": //文件输入
case "submit": //提交按钮
case "reset": //重置按钮
case "button": //自定义按钮
break;
case "radio": //单选按钮
case "checkbox": //复选按钮
if(!field.checked){
break;
}
default: //执行默认操作
//不包含没有名字的表单字段
if(field.name.length){
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
} }
}
return parts.join('&');
}

富文本编辑

富文本编辑,这一技术的本质,就是在页面中嵌入一个包含空HTML页面的iframe。通过设置designMode属性,这个空白的HTML页面可以被编辑,而编辑对象则是该页面<body>元素的HTML代码。designMode属性有两个可能的值:“off”(默认值)和“on”。在设置为“on”时,整个文档都会变得可以编辑(显示插入符号),然后就可以像使用字处理软件一样,通过键盘将文本内容加粗、变成斜线等等。

<iframe name="richedit" style="width:100px;height:100px;" src="index2.html"></iframe>
<script type="text/javascript">
EventUtil.addHandler(window,"load",function(event){
frames["richedit"].document.designMode = "on";
})
</script>

使用contenteditable属性

另一种编辑富文本内容的方式是使用名为contenteditable的特殊属性。这个属性最早由IE实现。使用它,不需要使用iframe、空白页和JS,只要给元素设置该属性即可,如下:

<div class="editable" id="richedit" contenteditable style="width:100px;height:100px;border:1px solid grey"></div>

通过在这个元素上设置contenteditable属性,也能打开或关闭编辑模式,代码如下:

var div = document.getElementById('richedit');
div.contentEditable = "false";

contentEditable属性有三个可能值:“true”表示打开,“false”表示关闭,“inherit”表示从父元素那里继承。

操作富文本

document.execCommand(),这个方法可以对文档执行预定义的命令,这个方法接受三个参数:要执行的命令名称、表示浏览器是否应该为当前命令提供用户界面的一个布尔值(跨浏览器兼容性,一般都设置为false)和执行命令必须的一个值。

使用命令来修改富文本区域的外观,如下例子:

//转换粗体文本
frames["richedit"].document.execCommand("bold",false,null); //转换斜体文本
frames["richedit"].document.execCommand("italic",false,null);

同样的方法适用于页面中contenteditable属性为true的区块:

//转换粗体文本
document.execCommand("bold",false,null); //转换斜体文本
document.execCommand("italic",false,null);

富文本选区

表单与富文本

EventUtil对象方法:

var EventUtil = {

    //事件处理程序
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on" + type,handler);
}else{
element["on" + type] = handler;
}
}, //得到event对象
getEvent:function(event){
return event ? event : window.event;
}, //得到事件目标
getTarget:function(event){
return event.target || event.srcElement;
}, //得到相关元素信息
getRelatedTarget:function(event){
if(event.relatedTarget){
return event.relatedTarget;
}
else if(event.toElement){
return event.toElement;
}
else if(event.fromElement){
return event.fromElement;
}else{
return null;
}
}, //取消默认行为
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
}, //得到button属性
getButton:function(event){
if(document.implementation.hasFeature("MouseEvents","2.0")){
return event.button;
}else{
switch(event.button){
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
}, //取得鼠标滚轮增量值(delta)
getWheelDelta:function(event){
if(event.wheelDelta){
return event.wheelDelta;
}else{
return -event.detail * 40;
}
}, //字符编码
getCharCode:function(event){
if(typeof event.charCode == 'number'){
return event.charCode;
}else{
return event.keyCode;
}
}, //移除事件处理程序
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on" + type,handler);
}else{
element["on" + type] = null;
}
}, //阻止事件捕获或冒泡
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}, //得到剪贴板数据
getClipboardData:function(event){
var clipboardData = (event.clipboardData || window.clipboardData);
return clipboardData.getData("text");
}, //设置剪贴板数据
setClipboardData:function(event,value){
if(event.clipboardData){
return event.clipboardData.setData("text/plain",value);
}else if(window.clipboardData){
return window.clipboardData.setData("text",value);
}
}
};