javascript操作表单-阿里云开发者社区

开发者社区> twilight0402> 正文

javascript操作表单

简介: 版权声明:本文为博主原创文章,转载请注明出处。 https://blog.
+关注继续查看
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/64511473

获取表单

1,getElementById()
2,getElementsByTagName()
3,documents.forms[] 每个form为一个数组元素
4,document.forms[‘name’] 通过name获取
5,docment.name 使用name直接获取。较方便。

PS:
event.preventDefault():方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)
IE:

window.event.returnValue = false;

function stopDefault(evt){
        var e = evt || window.event
        //非IE
        if(e && e.preventDefault)
          e.preventDefault();
        //IE
        else
          window.event.returnValue = false;
      }

使用preventDefault() 阻止默认提交行为:

      window.onload = function(){
            var submit = document.forms[0];
            submit.onsubmit = preventDefault;    // 使用所在的表单调用submit函数
      }

普通按钮实现提交事件(其他元素也可以):

    var data = document.getElementById("button");
    data.onclick = function(){
        document.forms[0].submit();
    }

获取表单字段

elements: 所有表单控件的集合,非表单控件会被忽略
elements.length: 获取表单控件的数量
name: 获取name属性值
type: 获取控件的type属性,可以更改(不建议修改)
form: 获取所在的form对象
value: 获取表单控件的value值
disabled: 关闭控件
focus(): 自动将焦点移入
blur(): 自动将焦点移出

也可以通过name获取
获取表单控件: document.表单名.表单元素名 (在表单和控件都有name属性的情况下)
访问值: document.表单名.表单元素名.value

事件:
blur 失去焦点时触发(鼠标点击)
focus 获得焦点时触发
change 文本框的文本改变时触发

也可以使用 elements[“name”] 获取表单控件元素,如果多个元素使用同一个name,则返回一个集合

    window.onload=function(){
        var form = document.forms[0].elements;
        alert("表单控件的数量: "+form.length);     // 3
        alert("name: " +form[0].name);              // input
        alert("type: " +form[0].type);              // input
        alert("form: " +form[0].form);              // 对象
        alert("form[0].value: " +form[0].value);    //twilight
        form[1].disabled = true;                    // 控件被禁用
        form[0].focus();                            // 加载完毕时自动获得焦点      
    }

表单如下:

    <form name="form1" method="get">
        姓名: <input type="text" name="input" size=10 />
        <input type="submit" value="提交" />
        <input type="button" value="普通按钮" id="button" />
    </form>

文本框脚本

value 获取文本框中的值(HTML DOM)
defaultValue 获取默认值
select() 选定文本

textarea没有value属性,但是在js中可以用value获取textarea的文本内容

    function showValue(){
        var data = document.forms[0].elements[0];
        alert(data.value);          // 获取文本框中的值
        alert(data.defaultValue);   // 获取默认值
        data.select();              // 选定文本框中的文本
        date.focus();               // 自动获得焦点
        alert("文本框的内容:"+document.forms[0].elements[1].value);   // 通过value获得textarea的内容
    }

赋值粘贴

copy 复制时触发
cut 剪切时触发
paste 粘贴时触发
beforecopy 复制前
beforecut 剪贴前
beforepaste 粘贴前

自动切换焦点

        <script>
            window.onload = function(){
                var form = document.forms[0];
                var elem = form.elements;
                elem[0].onkeyup = transform;
                elem[1].onkeyup = transform;
                elem[2].onkeyup = transform;

                function transform(evt){
                    var event = evt || window.event;
    //              alert(this);
                    var maxlength = this.maxLength;
                    var length = this.value.length;

    //              alert(maxlength+":"+length);
                    if(length==maxlength){
                        for(var i=0;i<form.length;i++){
                            if(form[i] === this){
                                form[++i].focus();
                                return;
                            }
                        }
                    }
                }
            }


        </script>
    <form>
        <input type="text" size="10" maxlength="1" />
        <input type="text" size="10" maxlength="3" />
        <input type="text" size="10" maxlength="5" />
        <input type="text" size="10" maxlength="10" />
    </form>

下拉选择框

通过elements获得对象

1,multiple 多选
2,selected 判断当前对象是否被选中(由option调用)
3,options获取option集合
4,value 选项的值
5,text 选项标签中的文本
6,selectedIndex 选中的索引(从0开始),默认是-1(可改变,会自动定位)(由select对象调用)

options[selectIndex].value 获取选中的value

            var form = document.form1;           // 通过name获取表单
            var option = form.school.options;    // 获取select标签下的option对象集合
            alert(option[0].value);              // 获取第一个option对象的value
            alert(form.school.selectedIndex);    // 用selectedIndex获得选中的索引,由表单控件select对象调用

对于单选下拉框,可以用下面的方式获取选中的对象的值:

document.form1.schools.value

但是对于复选下拉框,这种方法无法获得选中的值,schools是select标签上的name,但是对于复选下拉框会返回一个数组,数组内容是所有的option对象的集合

        alert(document.form1.schools.value);        //可以直接获取单选下拉框中被选择的value,但是多选下拉框不可以
        alert(document.form1.schools[0].value); //对于复选下拉框,可用select对象获取option的value
        alert(document.form1.schools[0].selected);  //复选下拉框用selected判断是否被选择,而单选按钮用checked判断是否被选择

添加选项:

用构造函数创建对象:

var option = new Option(“text”,”value”)
city.appendChild(option);

或者:

add(对象,位置)—–
IE : add(对象,undefined)

移除选项:

remove(index);

互换位置

insertBefore(对象,对象);

单选按钮

用 document.myForm.gender 获得单选按钮数组

访问元素的值: document.myForm.gender[索引].value
判断是否被选中: document.myForm.gender[索引].checked

    <form name = “myForm” >
        <input type=“radio” name=“gender” value=“male”/>
        <input type=“radio” name=“gender” value=“female”/>
    </form>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
javascript 常见数组操作( 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQue
原文:javascript 常见数组操作( 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、j...
915 0
Linux文本模式下录制、回放和共享操作记录(script、scriptreplay、mkfifo)的妙用
在生产中,有时候需要把别人的操作过程录制下来,后期可以进行回放查看。还可以实时共享自己的操作,让另一个人在千里之外指导你进行操作。
2554 0
bash 常用操作
删除不为空的文件夹 rm -rf dir_name
521 0
Linux基本操作 1-----命令行BASH的基本操作
1 Shell(壳)是用户与操作系统底层(通常是内核)之间交互的中介程序,负责将用户指令、操作传递给操作系统底层    shell 分为两种    CUI : Command Line Interface Linux 里面的CUI指的是B...
959 0
Hbase操作table常见方法示例
首先上我的输出类: /** * 功能:电池历史数据数据结构 * Created by liuhuichao on 2016/12/5. */ public class ResBatteryDataHistory implements Serializable { priv...
743 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
7977 0
Javascript操作DOM常用API总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识。
798 0
javascript 常见数组操作( 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQue
原文:javascript 常见数组操作( 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、j...
2147 0
javascript中的数组操作
1、数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值     要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以将元素存储在规定长度以外的,注意:这时长度会随之改变。
619 0
+关注
112
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载