首页 > 代码库 > js 表单

js 表单

2024-07-06 16:11:44   224人阅读

1. 提交表单
        提交按钮
            <input type=‘submit‘>
            <button type=‘submit‘></buttton>
            <input type=‘image‘ src=http://www.mamicode.com/‘qq.png‘>
            只要表单中存在上面的任何一种按钮，点击按钮或者按回车键就可以提交该表单。（textarea例外，在文本区中回车会换行）。
            以这种方式提交表单，浏览器在将请求发送给服务器之前触发 submit 事件，这样我们就有机会验证表单数据。
        form.submit();  也可以提交表单，但不会触发 submit 事件。
2.重置表单
        <input type=‘reset‘>
        <button type=‘reset‘></button>
3. 表单字段
        可以像访问页面中的其他元素一样，使用原生 DOM 方法访问表单元素。此外，每个表单都有 elements 属性，该属性是表单中所有元素的集合。
        每个表单字段在 elements 集合中的顺序，与它们出出在标记中的顺序相同，可以按照位置和 name 特性来访问它们。
        var field1 = form.elements[0];                    // 取得表单中的第一个字段
       var field2 = form.elements[‘textbox1‘];      //取得表单中 name 为 ‘textbox1‘ 的字段，如果多个表单控件使用同一个 name, 就会返回一个 NodeList 。
       var fieldCount = form.elements.length;     //取得表单中包含字段的数量
        
       共有的表单字段属性
                disabled : 布尔值，表示当前字段是否被禁用。
                form : 指向当前字段所属表单的指针，只读。
                name : 当前字段的名称。
                readOnly : 布尔值，表示当前字段是否只读。
                tabIndex : 表示当前字段的切换（tab）序号。
                type : 当前字段的类型。
                value : 当前字段将被提交经服务器的值。
                * 除了 form 属性之外，可以通过 js 动态修改其他任何属性。
        共有的表单方法
                focus() 和 blur() 
                HTML5 为表单字段新增了一个 autofocus 属性。只要设置这个属性，不用 js 就能自动把焦点移动到相应字段。例如：
                <input type=‘text‘ autofocus>
                * 在默认情况下，只有表单字段可以获取焦点。对于其他元素而言，如果先将其 tabIndex 属性设置为－1，然后再调用 focus() 方法，也可以
                   这些元素获得焦点。只有 Opera 不支持这种持术。
        共有的表单事件
                blur : 当前字段失去焦点时触发。
                change : 对于 <input>和<textarea>元素，在它们失去焦点且 value 值改变时触发；对于<select>元素，在其选项改变时触发。
                focus : 当前字段获得焦点时触发。
4. 文本框
        <input type=‘text‘ size=‘25‘ maxlength=‘50‘ value=http://www.mamicode.com/‘initial value‘ required>
        能够显示25个字符，输入最多50个字符，必填
        <textarea rows=‘25‘ cols=‘5‘>initial value</textarea>
        能够显示25行，5列
        选择文本框     input.select();    会触发 select 事件
        取得所选的文本    textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
        选择部分文本 textbox.setSelectionRange(0,5);                         // 如果看不到效果，让文本框获得焦点
        过滤输入   
　　  
1 $(‘input‘).keypress(function(event){
2         console.log(event.keyCode);
3         var str = String.fromCharCode(event.keyCode);
4         if(str == ‘m‘){
5               event.preventDefault();
6         }
7 });

5. 选择文本框

        选择文本框是通过<select> 和 <option> 元素创建的
        选择框“私有”属性和方法：
        add(newOption, relOpton) : 向控件中插入新<option>元素，其位置在相关项（relOption）之前。
        multiple : 布尔值，表示是否允许多项选择；
        options : 控件中的所有<option> 元素的集合。
        remove(index) : 移除给定位置的选项。
        selectedIndex : 基于 0 的选中项的索引，如果没有选中项，则值为 －1，对于支持多选的控件，只保存选中项第一项的索引。
        size : 选择框中可见的行数。
        选择框共有属性：
        type : ‘select-one‘ 或 ‘select-multiple’
        value : 没有选中项，value 为空；有一个选中项，value 等于选中项的 value ; 有多个选中项，取第一个选中项的值；选中项没有 value, 选择框的                      value 等于该项的文本。    
        option 属性 ： 
                 index : 当前选项在 options 集合中的索引。
                selected : 布尔值， 表示当前项是否被选中。将这个属性设置为 true 可以选中当前选项。
                text : 选项的文本。
                value : 选项的值。
        添加选项：
                var newOption = new Option(‘Option text‘, ‘Option value‘);
                selectbox.add(newOPtion, relOpton);         


联系
我们