欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript用字符串和数组两种方法获取文本框的值(代码教程)

程序员文章站 2024-01-16 12:20:10
1.这里将介绍两种方法,分别是字符串和数组的方法。因为文本框获得是字符串,所以用字符串做拼接的方法是比较容易想到的,但是我们知道字符串是不可变得,需要多个字符串才能拼接出我们想要的...

1.这里将介绍两种方法,分别是字符串和数组的方法。因为文本框获得是字符串,所以用字符串做拼接的方法是比较容易想到的,但是我们知道字符串是不可变得,需要多个字符串才能拼接出我们想要的值,这样就多开辟了一些空间,所以就有了数组的优化方法。

2.首先我们把骨架搭好,代码如下:

<!doctype html>  
<html>  
<head>  
    <title>为文本框赋值</title>  
</head>  
<body>  
    <input type="text" value="通过"> <br>  
    <input type="text" value="javascript"> <br>  
    <input type="text" value="给"> <br>  
    <input type="text" value="文本框"> <br>  
    <input type="text" value="赋值"> <br>  
    <input type="text" value="成功"> <br>  
    <input type="button" value="获取" id="btn">  
    <input type="checkbox">  
    <input type="radio">  
      
</body>  
</html>  

3.运行结果如图所示:

JavaScript用字符串和数组两种方法获取文本框的值(代码教程)

4.通过javascript来获取文本框的值,代码实现如下:

<!doctype html>  
<html>  
<head>  
    <title>为文本框赋值</title>  
</head>  
<body>  
    <input type="text" value="通过"> <br>  
    <input type="text" value="javascript"> <br>  
    <input type="text" value="给"> <br>  
    <input type="text" value="文本框"> <br>  
    <input type="text" value="赋值"> <br>  
    <input type="text" value="成功"> <br>  
    <input type="button" value="获取" id="btn">  
    <input type="checkbox">  
    <input type="radio">  
    <script>  
        // 通过id获取按钮  
        var btn = document.getelementbyid('btn');  
        // 给按钮注册点击事件  
        btn.onclick = function () {  
            // 通过标签名获得input集合  
            var inputs = document.getelementsbytagname('input');  
            var i = 0, len = inputs.length;  
            // 声明一个空字符串用来接收拼接的字符串  
            var str = '';  
            // 循环取出文本框中的值  
            for (; i < len; i++) {  
                var input = inputs[i];  
                if (input.type !== 'text') {  
                    continue;  
                }  
                str += input.value;  
            }  
            // 控制台输出拼接后的语句  
                console.log(str);  
        }  
  
    </script>  
</body>  
</html>  

5.当打开页面之后不要急着点击“获取”按钮,推荐用谷歌或者火狐,按“f12”或者右键查看页面源代码,找到“console”控制台。

JavaScript用字符串和数组两种方法获取文本框的值(代码教程)

6.之后点击“获取”按钮,观察控制台变化。

JavaScript用字符串和数组两种方法获取文本框的值(代码教程)

7.这样我们就通过javascript获取到了文本框的值,但是这种方法是字符串拼接方法获取的,下面介绍数组方法获取,代码如下:

<!doctype html>  
<html>  
<head>  
    <title>为文本框赋值</title>  
</head>  
<body>  
    <input type="text" value="通过"> <br>  
    <input type="text" value="javascript"> <br>  
    <input type="text" value="给"> <br>  
    <input type="text" value="文本框"> <br>  
    <input type="text" value="赋值"> <br>  
    <input type="text" value="成功"> <br>  
    <input type="button" value="获取" id="btn">  
    <input type="checkbox">  
    <input type="radio">  
    <script>  
        // 通过id获取按钮  
        var btn = document.getelementbyid('btn');  
        // 给按钮注册点击事件  
        btn.onclick = function () {  
            // 通过标签名获得input集合  
            var inputs = document.getelementsbytagname('input');  
            var i = 0, len = inputs.length;  
            // 声明一个数组用来接收拼接的字符串  
            var arr = [];  
            // 循环取出文本框中的值  
            for (; i < len; i++) {  
                var input = inputs[i];  
                if (input.type !== 'text') {  
                    continue;  
                }  
                arr.push(input.value);  
            }  
            // 控制台输语句  
                console.log(arr);  
        }  
  
    </script>  
</body>  
</html>  

8.我们将得到如图所示的结果:

JavaScript用字符串和数组两种方法获取文本框的值(代码教程)

9.我们确实通过数组获得到了文本框的值,但是这种获取的方式并不是我们想要的一句话的形式,优化过后的代码如下:

<!doctype html>  
<html>  
<head>  
    <title>为文本框赋值</title>  
</head>  
<body>  
    <input type="text" value="通过"> <br>  
    <input type="text" value="javascript"> <br>  
    <input type="text" value="给"> <br>  
    <input type="text" value="文本框"> <br>  
    <input type="text" value="赋值"> <br>  
    <input type="text" value="成功"> <br>  
    <input type="button" value="获取" id="btn">  
    <input type="checkbox">  
    <input type="radio">  
    <script>  
        // 通过id获取按钮  
        var btn = document.getelementbyid('btn');  
        // 给按钮注册点击事件  
        btn.onclick = function () {  
            // 通过标签名获得input集合  
            var inputs = document.getelementsbytagname('input');  
            var i = 0, len = inputs.length;  
            // 声明一个数组用来接收拼接的字符串  
            var arr = [];  
            // 循环取出文本框中的值  
            for (; i < len; i++) {  
                var input = inputs[i];  
                if (input.type !== 'text') {  
                    continue;  
                }  
                arr.push(input.value);  
            }  
            // 控制台输语句  
            var str = arr.join('');  
                console.log(str);  
        }  
  
    </script>  
</body>  
</html>  

10.再次刷新,点击“获取”按钮就能够得到我们想要的字符串。