var form = document.getElementById("form1");
var firstForm = document.forms[0];
var myForm = document.forms["form2"];
   objform.elements('objid')

获取方法

    <form action="" name='myFormname' id="myForm">
        <textarea name="" id="" cols="30" rows="10" name='textbox' id='textbox'></textarea>
        <ul>
            <li>
                <input type="radio" name="colorName" id='colorID1' value="red">Red</li>
            <li>
                <input type="radio" name="colorName" id='colorID2' value="green">Green</li>
            <li>
                <input type="radio" name="colorName" id="colorID3" value="blue">Blue</li>
        </ul>
    </form>
        var formId  = document.getElementById('myForm')
        var formName = document.getElementsByName('myFormname')[0]
        var form0 = document.forms[0]
        
        
        
        var colorId = formId.elements['colorName']
        alert(colorId.length)//3
        
        var colorName = formName.elements['colorName']
        alert(colorName.length)//3

,有3 个单选按钮,它们的name 都是"color",意味着这3 个字段是一起的。
在访问elements["color"]时,就会返回一个NodeList,其中包含这3 个元素;不过,如果访问
elements[0],则只会返回第一个元素。来看下面的例子。

var form = document.getElementById("myForm");
var colorFields = form.elements["color"];
alert(colorFields.length); //3
var firstColorField = colorFields[0];
var firstFormField = form.elements[0];
alert(firstColorField === firstFormField); //true

除了fieldset元素之外,所有表单字段都拥有相同的一组属性。由于input类型可以表示多
种表单字段,因此有些属性只适用于某些字段,但还有一些属性是所有字段所共有的。表单字段共有的
属性如下。
 disabled:布尔值,表示当前字段是否被禁用。
 form:指向当前字段所属表单的指针;只读。
 name:当前字段的名称。
 readOnly:布尔值,表示当前字段是否只读。
 tabIndex:表示当前字段的切换(tab)序号。
 type:当前字段的类型,如"checkbox"、"radio",等等。
 value:当前字段将被提

var filed = form.elements[0]
filed.value = 'auther Value'
alert(filed.form === form) //true

//把焦点设置到当前字段
field.focus();

//禁用当前字段
field.disabled = true;

//修改type 属性(不推荐,但对input来说是可行的)
field.type = "checkbox";

这就是个问题:因为会导致费用翻番。
为此,最常见的解决方案,就是在第一次单击后就禁用提交按钮。只要侦听submit 事件,并在该事件
发生时禁用提交按钮即可。以下就是这样一个例子。

EventUtil.addHandler(form, "submit", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);

//取得提交按钮
var btn = target.elements["submit-btn"];

//禁用它
btn.disabled = true;
});

注意,不能通过onclick 事件处理程序来实现这个功能,原
因是不同浏览器之间存在“时差”:有的浏览器会在触发表单的submit 事件之前触发click 事件,
而有的浏览器则相反。对于先触发click 事件的浏览器,意味着会在提交发生之前禁用按钮,结果
永远都不会提交表单

focus()和 blur()。

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

要注意的是,如果第一个表单字段是一个input元素,且其type 特性的值为"hidden",那么
以上代码会导致错误。另外,如果使用CSS 的display 和visibility 属性隐藏了该字段,同样也会
导致错误。

HTML5 为表单字段新增了一个autofocus 属性。在支持这个属性的浏览器中,只要设置这个属性,
不用JavaScript 就能自动把焦点移动到相应字段。例如:

<input type="text" autofocus>

检测是否支持autofocus属性

EventUtil.addHandler(window, "load", function(event) {
    var element = document.forms[0].elements[0];

    if (element.autofocus !== true) {
        element.focus();
        console.log("JS focus");
    }
});

共有字段事件

 blur:当前字段失去焦点时触发。
 change:对于input和textarea元素,在它们失去焦点且value 值改变时触发;对于
select元素,在其选项改变时触发。
 focus:当前字段获得焦点时触发。

。对于input和textarea元素,当它们从获得焦点到失去焦点且value 值改变时,
才会触发change 事件。对于select元素,只要用户选择了不同的选项,就会触发change 事件;
换句话说,不失去焦点也会触发change 事件

获得焦点时选择所有文本

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

取得选择的文本selectionStart 和selectionEnd 即文本选区开头和结尾的偏移

function getSelectedText(textbox){
return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
}

因为substring() 方法基于字符串的偏移量执行操作, 所以将selectionStart 和
selectionEnd 直接传给它就可以取得选中的文本。

IE8 及更早的版本中有一个document.selection

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

input textarea

选择部分文本:
setSelectionRange()方法。
现在除select()方法之外,所有文本框都有一个setSelectionRange(第一个字符的索引,要选择的和要选择的最后一个字符之后的字符的索引)
(类似于substring()方法的两个参数)。来看一个例子。

        var forminp = document.forms[0].elements[0]
            //      console.log(form1)
            //    console.log( form1.value)
            
        
        forminp.value = 'hello world'
        
        forminp.setSelectionRange(0,forminp.value.length)   //选中hello world
        
        forminp.setSelectionRange(0,3)  //选中hel
        

IE8以下,不作讨论

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);
range.select(); //"Hel"
//选择第4 到第6 个字符
range.collapse(true);
range.moveStart("character", 4);
range.moveEnd("character", 3);
range.select(); //"o w"

跨浏览器

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();
}

这个selectText()函数接收三个参数:要操作的文本框、要选择文本中第一个字符的索引和要选
择文本中最后一个字符之后的索引

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

过滤输入

下列代码只允许用户输入数值。


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);
    }
});

。这意味着,仅考虑到屏蔽不是数值的字符还不够,还要避免屏蔽这些极为常用和必要的键

在Firefox 中,所有由非字符键触发的keypress 事件对应的字符编码为0,而在Safari 3 以前的版本中,对应的字符编码全部为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);
    }
});

还有一个问题需要处理:复制、粘贴及其他操作还要用到Ctrl 键。在除IE 之外的所有
浏览器中,前面的代码也会屏蔽Ctrl+C、Ctrl+V,以及其他使用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);
    }
});

 beforecopy:在发生复制操作前触发。
 copy:在发生复制操作时触发。
 beforecut:在发生剪切操作前触发。
 cut:在发生剪切操作时触发。
 beforepaste:在发生粘贴操作前触发。
 paste:在发生粘贴操作时触发。
在Safari、Chrome 和Firefox
中,beforecopy、beforecut 和beforepaste 事件只会在显示针对文本框的上文菜单(预期将发
生剪贴板事件)的情况下触发
,IE 则会在触发copy、cut 和paste 事件之前先行触发这些事件
在实际的事件发生之前,通过beforecopy、beforecut 和beforepaste 事件可以在向剪贴板发
送数据,或者从剪贴板取得数据之前修改数据。不过,取消这些事件并不会取消对剪贴板的操作——只
有取消copy、cut 和paste 事件,才能阻止相应操作发生。

访问剪贴板 -- 》用clipboardData 对象 IE- - window对象,这个对象是相应event 对象的属性;在Firefox、Safari 和Chorme 中,只有在处理剪贴板事件期间clipboardData 对象才有效,

,这是为了防止对剪贴板
的未授权访问;在IE 中,则可以随时访问clipboardData 对象。为了确保跨浏览器兼容性,最好只
在发生剪贴板事件期间使用这个对象。
clipboardData 对象有三个方法:getData(取得数据的格式)、setData()和clearData()
在IE 中,有两种数据格式:"text"
和"URL"。在Firefox、Safari 和Chrome 中,这个参数是一种MIME 类型;不过,可以用"text"代表
"text/plain"。

类似的其它方法也一样'

扩展getClipboardText与setClipboardText方法;

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;
        }
    },
    getEvent: function(event) {
        return event ? event : window.event;
    },
    getTarget: function(event) {
        return event.target || event.srcElement;
    },
    preventDefault: function(event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    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;
        }
    },
    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;
        }
    },
    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;
            }
        }
    },
    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;
        }
    },
    getClipboardText: function(event) {
        var clipboardData = (event.clipboardData || window.clipboardData);
        return clipboardData.getData("text");
    },
    setClipboardText: function(event, value) {
        if (event.clipboardData) {
            return event.clipboardData.setData("text/plain", value);
        } else if (window.clipboardData) {
            return window.clipboardData.setData("text", value);
        }
    }
}

例如,如果一个文本框只接受数值,那么就必须检测粘贴过来的值,以确保有效。在paste
事件中,可以确定剪贴板中的值是否有效,如果无效,就可以像下面示例中那样,取消默认的行为。

EventUtil.addHandler(textbox, "paste", function(event) {
    event = EventUtil.getEvent(event);
    var text = EventUtil.getClipboardText(event);
    if (!/^\d*$/.test(text)) {
        EventUtil.preventDefault(event);
    }
});

自动切换焦点:

<form action="" name='myFormname' id="myForm">
<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>

,用户在第一个文本框中输入了3 个数字之后,焦点就会切换到第二个文
本框,再输入3 个数字

(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验证
必填字段

<input type="text" name="username" required>

可以检查某个表单字段是否为必填字段。

var isUsernameRequired = document.forms[0].elements["username"].required;

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

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

其它输入类型

<input type="email" name ="email">  //会把-@-当作有效电子邮件地址
<input type="url" name="homepage">

要检测浏览器是否支持这些新类型,可以在JavaScript 创建一个<input>元素,然后将type 属性
设置为"email"或"url",最后再检测这个属性的值

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

例如,想让用户只能输入0 到100 的值,而且这个值必须是5 的倍数,可以这样写代码:

<input type="number" min="0" max="100" step="5" name="count">
  1. 输入模式

HTML5 为文本字段新增了pattern 属性。这个属性的值是一个正则表达式,用于匹配文本框中的
值。例如,如果只想允许在文本字段中输入数值,可以像下面的代码一样应用约束:

<input type="text" pattern="\d+" name="count">

注意,模式的开头和末尾不用加^和$符号(假定已经有了)。这两个符号表示输入的值必须从头到
尾都与模式匹配。

使用以下代码可以检测浏览器是否支持pattern 属性。

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

检测有效性
用checkValidity()方法可以检测表单中的某个字段是否有

if (document.forms[0].elements[0].checkValidity()){
//字段有效,继续
} else {
//字段无效
}

可以在表单自身调用checkValidity()方法。如果所有表单字段都有
效,这个方法返回true;即使有一个字段无效,这个方法也会返回false。

if(document.forms[0].checkValidity()){
//表单有效,继续
} else {
//表单无效
}
function validity(){
console.log( document.forms[0].elements['emailName'].validity )
console.log( document.forms[0].elements['emailName'] )
}

因此,要想得到更具体的信息,就应该使用validity 属性来检测表单的有效性。下面

var input = document.forms[0].elements['emailName']
if (input.validity && !input.validity.valid) {
    if (input.validity.valueMissing) {
        alert("Please specify a value.")
    } else if (input.validity.typeMismatch) {
        alert("Please enter an email address.");
    } else {
        alert("Value is invalid.");
    }
}

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

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

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>
//禁用验证
document.forms[0].elements["btnNoValidate"].formNoValidate = true;

选择框脚本

select option创建
add(newOption,relOption):插入新的option,其位置相关项relOption之前
multiple,布尔值,允许多项选择,等价于html中的multiple特性;
remove(index),移除给定位置的选项
size:选择框中可见的行数,等价于html中的size特性;
选择的type属性不是'select-one'就是'select-mutiple'这取决于HTML代码中有没有multiple特性;选择框的value属性由当前选中项决定,相应规则如下:

如果没有选中的项,则选择框的value 属性保存空字符串。
如果有一个选中项,而且该项的value 特性已经在HTML 中指定,则选择框的value 属性等
于选中项的value 特性。即使value 特性的值是空字符串,也同样遵循此条规则。
如果有一个选中项,但该项的value 特性在HTML 中未指定,则选择框的value 属性等于该
项的文本。
如果有多个选中项,则选择框的value 属性将依据前两条规则取得第一个选中项的值。
以下面的选择框为例:

var sel = document.getElementById('selLocation');
console.log(sel.value)
<select name="location" id="selLocation">
<option value="Sunnyvale, CA" selected>Sunnyvale</option>  // Sunnyvale, CA
<option value="" selected>Sunnyvale</option> // 空 ''
<option selected>Australia</option> //没有value , //Australia
</select>

每个<option>元素都有一个HTMLOptionElement 对象表示,有下列属性:

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

访问值:DOM方法(不推荐,效率低)

var selectbox = document.forms[0].elements["location"];
var text = selectbox.options[0].firstChild.nodeValue;
var value = selectbox.options[0].getAttribute('value')
console.log(value)

选项属性代码:(推荐)

var selectbox = document.forms[0].elements["location"];
var text = selectbox.options[0].text;
var value = selectbox.options[0].value;
console.log(value) 

对于只允许选择一项的选择框,访问选中项的最简单方式,就是使用选择框的selectedIndex 属性

//选中的项
var selectedOption = selectbox.options[selectbox.selectedIndex]

console.log(selectedOption) //<option selected="">Australia</option>

console.log('selected index: '+ selectbox.selectedIndex)
console.log('selected text: '+ selectedOption.text)
console.log('selected value: '+ selectedOption.value)

设置select

selectbox.options[0].selected = true;

//但设置多个 

selectbox.options[1].selected = true;
selectbox.options[0].selected = true; //后面覆盖前面

添加option选项一:

var newOption = document.createElement('option')
newOption.appendChild(document.createTextNode('option text'))
newOption.setAttribute('value','Option value')
selectbox.appendChild(newOption)

添加option选项二:Option构造函数,第二个参数可选(IE8不支持)

var newoption = new Option('option txt','option value')
selectbox.appendChild(newoption)

添加option选项三:
add(要添加的新选项,位于新选项之后的选项),为第二个参数传undefined

var nnoption = new Option('ooption ttt','option value')
selectbox.add(nnoption,undefined)  //最佳

移除选项

//1
selectbox.removeChild(selectbox.options[0])
//2
selectbox.remove(0)
//3
selectbox.options[0] = null

//移除所有
function clearSelect(selectbox){
  for(var i=0;i<selectbox.options.length;i++){
    selectbox.remove(i)
  } 
}
clearSelect(selectbox)

移动和重排选项
一个select的option移到另一个select的options
如果为appendChild()方法传入一个文档中已有的元素,那么就从该元素的父节点中移除它,再把它添加到指定的位置

var sel = document.getElementById('selLocation');
var sel2 = document.getElementById('selLocation2');
sel2.appendChild(sel.options['caname'])

要将选择框中的某一项移动到特定位置,最合适的DOM 方法就是insertBefore();appendChild()方法只适用于将选项添加到选择框的最后。要在选择框中向前移动一个选项的位置,可以使用以下代码:

//向前移动一个选项

var optionMoveTo = sel.options[1];
sel.insertBefore(optionMoveTo,sel.options[optionMoveTo.index-1])

表单select序列化

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[j];
                        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("&");
}

马上变成可编辑选项,contenteditable

 <div class="editable" id="richedit" contenteditable></div>

也可在关闭

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

富文编辑略。。。。