小程序如何获取input标签的值
小程序开发中，我们经常需要获取input标签的值。input标签是Web前端的一种标准标记，也是小程序中常用的一个表单元素。它可以接收用户的输入并将其传递给后端进行处理。在小程序中，我们可以通过一些方法来获取input标签的值。下面详细介绍。
一、input标签的基本用法
我们首先来看一下input标签的基本用法。在小程序中，我们可以通过< input >标签创建input元素。下面是一个实例：
<view class="form-group">
<view class="form-item">
<view class="input-title">姓名：</view>
<input class="input" id="name" type="text" placeholder="请输入姓名"></input>
</view>
</view>
在上面的代码中，我们使用< input >标签创建了一个输入框，并设置了一些属性，包括id、type和placeholder。id属性是输入框的 标识符，type属性定义输入框的类型，placeholder属性定义了输入框的默认值。
二、通过id属性获取input标签的值
在小程序中，我们可以通过id属性来获取输入框的值。具体做法是，使用wx.createSelectorQuery()方法获取到输入框的节点，然后使用节点的value属性获取输入框的值。
下面是一个示例代码：
// 监听用户输入
bindInput: function(e) {
var that = this
var inputValue = e.detail.value
console.log(inputValue)
}
在上面的代码中，我们绑定了一个bindInput事件，可以在用户输入文本时被调用。在事件处理函数中，我们通过e.detail.value获取输入框的值，并将其打印到控制台中。
如果我们想在其他地方使用输入框的值，可以将其保存到变量中，或者将其传递给后端进行处理。
三、通过name属性获取input标签的值
除了id属性外，我们也可以通过name属性获取输入框的值。name属性是一个可选属性，用于指定表单元素的名称。在小程序中，我们可以使用wx.createSelectorQuery()方法获取到表单元素的节点，然后使用节点的value属性获取输入框的值。
下面是一个示例代码：
// 监听提交按钮
bindSubmit: function(e) {
var that = this
var formValue = {}
var formInput = wx.createSelectorQuery().select('.form-input')
formInput.fields({
dataset: true,
size: true,
node: true,
properties: ['name', 'value'],
computedStyle: ['fontSize', 'marginTop']
}, function(res) {
console.log(res)
formValue[res.name] = res.value
console.log(formValue)
}).exec()
}
在上面的代码中，我们绑定了一个bindSubmit事件，可以在用户点击提交按钮时被调用。在事件处理函数中，我们使用wx.createSelectorQuery()方法获取到表单元素的节点，然后调用fields方法获取输入框的值。对于每个表单元素，我们可以通过res.name和res.value获取其名称和值，并将其保存到formValue对象中。
四、通过getValues方法获取多个input标签的值
通常情况下，一个表单中会包含多个输入框。如果我们需要获取多个输入框的值，可以使用getValues方法实现。getValues方法是一个自定义方法，我们需要先定义它，在表单元素上调用该方法即可获取所有输入框的值。
下面是一个示例代码：
// 在页面的onLoad事件中定义getValues方法
onLoad: function () {
this.getValues = function (e, cb) {
var that = this
var values = {}
var success = 0
var complete = 0
var inputs = e.detail.value
var length = Object.keys(inputs).length
if (length == 0) {
typeof cb == "function" && cb(values)
return
}
for (var key in inputs) {
var input = wx.createSelectorQuery().select('#' + key)
input.fields({
dataset: true,
size: true,
node: true,
properties: ['name', 'value'],
computedStyle: ['fontSize', 'marginTop']
}, function(res) {
success++
console.log(res)
values[res.name] = res.value
if (success == length) {
typeof cb == "function" && cb(values)
}
}).exec(function () {
complete++
if (complete == length) {
typeof cb == "function" && cb(values)
}
})
}
}
},
// 在表单元素上绑定事件，并调用getValues方法
bindSubmit: function (e) {
var that = this
that.getValues(e, function(values) {
console.log(values)
})
}
在上面的代码中，我们在页面的onLoad事件中定义了getValues方法，用于获取所有输入框的值。在表单元素上绑定bindSubmit事件，并在事件处理函数中调用getValues方法。getValues方法会通过wx.createSelectorQuery()方法获取所有输入框的值，并将其保存到一个名为values的对象中。当所有输入框的值都获取完成时，会调用回调函数，将values对象作为参数传递给它。
五、总结
通过本文的介绍，我们了解了小程序中获取input标签的值的几种常见方法。无论是通过id属性、name属性或者自定义方法，我们都可以轻松获取到input标签的值，并将其用于后续的操作中。针对不同的场景，我们可以选择不同的方法来获取输入框的值，以便更加高效地完成开发工作。