表单对象,文档对象的子对象,Javascript的Runtime Engine自动为每个表单建立对应的表单对象
属性:
action 表单的动作
elements 以索引表示的所有表单元素
encoding MIME的类型
length 表单元素的个数
mehtod 方法
name 表单名称
target 目标
方法:
handleEvent(event) 使事件处理程序生效
reset() 重置
submit() 提交[@more@]
1、文本对象
访问:document.forms[索引].elements[索引].属性|方法
document.表单名称.文件本对象名称.属性|方法
属性:
defaultValue 该对象的value属性
form 该对象所在的表单名称
name 该对象的名称
type 该对象的type属性
value 该对象的value属性
方法:
blur() 失去焦点
focus() 获得焦点
handleEvent(event) 使事件处理程序生效
select() 该对象设置为选取状态
事件处理程序:
onBlur onChange onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove onSelect
1)获取文本框内容的方法
view plaincopy to clipboardprint?
2)文本框获得和失去焦点事件
view plaincopy to clipboardprint?
<!--
function getFocus(obj){
obj.style.color = "#ff0000";
obj.style.background = "#dbdbdb" ;
}
function getBlur(obj){
obj.style.color = "#000000";
obj.style.background = "#ffffff";
}
// --> <!--
function getFocus(obj){
obj.style.color = "#ff0000";
obj.style.background = "#dbdbdb" ;
}
function getBlur(obj){
obj.style.color = "#000000";
obj.style.background = "#ffffff";
}
// --> 3)满四位自动下移到下一个文本框的文字输入
view plaincopy to clipboardprint?
<!--
var i = 0 ;
function movenext(obj,i) {
if(obj.value.length == 4) {
document.forms[2].elements[i+1].focus();
}
}
function result() {
fm = document.forms[2];
num = fm.elements[0].value +
fm.elements[1].value +
fm.elements[2].value +
fm.elements[3].value ;
alert("你输入的信用卡号码为:"+num);
}
// --> <!--
var i = 0 ;
function movenext(obj,i) {
if(obj.value.length == 4) {
document.forms[2].elements[i+1].focus();
}
}
function result() {
fm = document.forms[2];
num = fm.elements[0].value +
fm.elements[1].value +
fm.elements[2].value +
fm.elements[3].value ;
alert("你输入的信用卡号码为:"+num);
}
// --> 2、密码对象
密码对象与文本对象基本相似,只是将type改为password类型。
view plaincopy to clipboardprint?
<!--
function checkPw(){
fm = document.form4;
if(fm.pw2.value != fm.pw1.value){
alert("密码不符,请重新输入!");
document.form4.pw2.select();
}else {
alert("谢谢你,"+fm.txtName.value);
}
}
// --> <!--
function checkPw(){
fm = document.form4;
if(fm.pw2.value != fm.pw1.value){
alert("密码不符,请重新输入!");
document.form4.pw2.select();
}else {
alert("谢谢你,"+fm.txtName.value);
}
}
// --> 3、按钮对象、提交按钮对象和重置按钮对象
type="button"||"submit"||"reset"
4、隐藏对象
type="hidden"
5、单选按钮对象
checked 设置该对象为选定状态
defaultChecked 对应该对象的默认选定状态
type="radio"
view plaincopy to clipboardprint?
<!--
function show(){
var x = "先生" ;
if(document.form5.sex[1].checked){
x = "小姐" ;
}
alert(document.form5.txtYourName.value + x);
}
// -->
<!--
function show(){
var x = "先生" ;
if(document.form5.sex[1].checked){
x = "小姐" ;
}
alert(document.form5.txtYourName.value + x);
}
// --> 6、复选框对象
type="checkbox"
view plaincopy to clipboardprint?
<!--
function count(){
var checkCount = 0 ;
var num = document.form6.elements.length ;
for(var i=0;i if(document.form6.elements[i].checked){
checkCount ++ ;
}
}
alert("你喜欢"+ checkCount + " 种颜色。");
}
// -->
<!--
function count(){
var checkCount = 0 ;
var num = document.form6.elements.length ;
for(var i=0;i if(document.form6.elements[i].checked){
checkCount ++ ;
}
}
alert("你喜欢"+ checkCount + " 种颜色。");
}
// --> 7、下拉选择框对象
length 选项的数目
options option标记集合
selectedIndex 所选项目的索引值
选项对象:下接选择框对象的子对象
new Option([显示文本[,值[,defaultSelected[,selected]]]]);
text 该选项显示的文本
value 该选项的值
view plaincopy to clipboardprint?
<!--
var URL = new Array(3);
URL[0] = "http://www.baidu.com" ;
URL[1] = "http://www.google.cn" ;
URL[2] = "http://www.yahoo.com.cn" ;
function goto(form){
var i = form.menu.selectedIndex ;
if(i>0){
location = URL[i-1];
}
}
// --> <!--
function createOptions(){
var op=new Option(document.form7.select1.value) ;
document.form7.select2.options.add(op) ;
}
// --> <!--
var URL = new Array(3);
URL[0] = "http://www.baidu.com" ;
URL[1] = "http://www.google.cn" ;
URL[2] = "http://www.yahoo.com.cn" ;
function goto(form){
var i = form.menu.selectedIndex ;
if(i>0){
location = URL[i-1];
}
}
// --> <!--
function createOptions(){
var op=new Option(document.form7.select1.value) ;
document.form7.select2.options.add(op) ;
}
// --> 8、文本域对象
view plaincopy to clipboardprint?
<!--
function isTooLong(elm){
if(elm.length>50){
alert("留言内容太长,请修改后再发送...");
return false;
}
}
// -->
来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/23493047/viewspace-1033130/
,如需转载,请注明出处,否则将追究法律责任。