javascript 获取文本框的值

在进行网页开发过程中，常常会需要获取用户输入的数据，其中文本框是常用的一种输入控件。而通过JavaScript获取文本框的值是非常简单的一个操作。下面通过几个例子来详细介绍一下文本框的值的获取方法。

1、通过document.getElementById()获取文本框的值。

input type="text" id="name">
    input type="button" onclick="getValue()" value="获取姓名">
    script>
function getValue(){
    var name = document.getElementById("name").value;
    alert(name);
}
    /script>
    

在上述的代码中，通过getElementById()可以获取到文本框的ID为“name”的值，并赋值给name变量。最后通过alert()输出弹框的形式展示在页面上。

2、通过document.getElementsByName()获取文本框的值。

input type="text" name="phone">
    input type="button" onclick="getValue()" value="获取手机号码">
    script>
function getValue(){
    var phones = document.getElementsByName("phone");
    for(var i=0;
     iphones.length;
 i++){
    alert(phones[i].value);
}
}
    /script>
    

在上述代码中，通过getElementsByName()可以获取所有同名的文本框并存储在phones数组中，然后通过for循环遍历并一个一个弹框展示。

3、通过form的elements属性获取文本框的值。

form name="myForm">
    input type="text" name="userName">
    input type="text" name="userAge">
    input type="button" onclick="getValue()" value="获取个人信息">
    /form>
    script>
function getValue(){
    var myForm = document.forms["myForm"];
    var userName = myForm.elements["userName"].value;
    var userAge = myForm.elements["userAge"].value;
    alert("姓名："+userName+"，年龄："+userAge);
}
    /script>
    

在上述代码中，通过form元素的name属性获取form对象，再通过form的elements属性获取所有表单项的对象，再通过元素的name属性获取相应的文本框的值。最后通过alert()输出弹框的形式展示在页面上。

通过上述的三个例子，我们可以看到获取文本框的值在JavaScript中是非常简单的一个操作，通过不同的方法可以获取到文本框的值并进行操作和利用。在网页的开发中，获取文本框的值是非常常见的操作，掌握这个操作可以让你的开发效率提高而且更高效。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！