JavaScript-用字符串和数组两种方法获取文本框的值
2018-02-04 20:15
656 查看
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.运行结果如图所示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201802/f0f54bcb8e734dc5984fd963afb6d408)
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'
ba3f
);
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”控制台。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201802/4497bba2a0424155b49ec2b1a0aaa957)
6.之后点击“获取”按钮,观察控制台变化。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201802/fcd7d0b5008a50a73bef0aca1df29e1e)
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.我们将得到如图所示的结果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201802/1401b8c39c03b21e2302b87af17013a3)
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.再次刷新,点击“获取”按钮就能够得到我们想要的字符串。
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.运行结果如图所示:
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'
ba3f
);
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”控制台。
6.之后点击“获取”按钮,观察控制台变化。
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.我们将得到如图所示的结果:
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.再次刷新,点击“获取”按钮就能够得到我们想要的字符串。
相关文章推荐
- 1.如何避免野指针2.获取字符串的两种方法。以及malloc,calloc,ralloc的使用注意点3.二维三维数组4.数组和函数的区别
- JavaScript 数组和字符串之间的转换:join()方法 和 split()方法
- @V@ java代码笔记2010-06-12:java控制台输入各类型类实现;以及判断输入字符串里面是否有数字的两种方法:方法1:转换成字符数组;方法2:正则表达式。
- javascript字符串转换成日期型的两种方法
- 英文字符串第一个字符大写C#和Javascript两种实现方法
- 存放字符串数组的两种方法
- Javascript 获取链接(url)参数的方法[正则与截取字符串]
- php获取数组中重复数据的两种方法
- php中用数组下标的方法来获取字符串的值
- JAVASCRIPT调用OCX获取字符串数组参数
- javaScript array(数组)使用字符串作为数组下标的方法
- Javascript获取字符串字节数的方法
- javascript中字符串与数组互转的方法分享
- javascript的原生方法获取数组中的最大(最小)值
- javascript的字符串转日期的两种方法
- Javascript 获取链接(url)参数的方法[正则与截取字符串](转载)
- php获取数组中重复数据的两种方法
- Javascript 获取字符串字节数的多种方法
- javascript获取兄弟节点的两种方法
- javascript获取中英文混合字符串的长度方法