1 基本使用
基本效果就是显示了一个文本输入框。 placeholder 输入框为空时的占位符 auto-focus 自动聚集，拉起键盘，需要注意的是一个页面中只能有一个 input 标签 或者 textarea 来设置这个属性2 获取输入框中的内容
bindinput 属性用来绑定键盘输入时的事件监听，也就是可以实时获取输入中的内容 。 当然 在你的处理函数中可以直接 return 一个结果来替换输入框中的内容。
对应的 js userNameInputAction: function (options) { //获取输入框输入的内容 let value = options.detail.value; console.log("输入框输入的内容是 " + value) }3 输入框焦点监听
应用场景还是比较多的，比如输入结束时 去校验个数据什么的
bindfocus bindblur 输入框焦点移出 bindconfirm 点击键盘的回车键或者是完成按钮时回调的事件 对应的 js
userNameFocusAction: function (options) { //输入框焦点获取 let value = options.detail.value; console.log("输入框焦点获取 " + value) },
userNameBlurAction: function (options) { //输入框焦点移出 let value = options.detail.value; console.log("输入框焦点移出 " + value) },
userNameConfirm: function (options) { //点击了键盘上的完成按钮 let value = options.detail.value; console.log("点击了键盘上的完成按钮 " + value) },
4 常用输入限制
disabled 默认为false 不禁用输入框，为true时是不可输入的 1 Page({
/**
- 页面的初始数据 */ data: { isInput:true }, })
password 默认为 false ，为true时，输入的内容为密码类型 value 输入框初始内容
5 type 文本框输入内容格式
在HTML中，input组件中的type属性可以接收哪些值，有button、text、radio、checkbox、hidden、image、reset、submit等。而在微信小程序中，type属性只有text、number、idcard、digit、time和date。
type 输入框可输入的数据 类型 text 文本 number 数字 纯数字键盘模式输入 无小数点 idcard 数字 数字键盘（无小数点、有个 X 键） digit 数字 带小数点的数字键盘模式输入
6 使用input框实现类似百度网盘获取验证码的场景
emm.. 这个还在琢磨中，目前只实现了验证码的输入与删除，直接通过手机键盘上的验证码信息粘贴到输入框中还在钻研，欢迎各位大佬提供思路。
<template>
<view class="input-container">
<input
wx:for="{{inputArray}}"
class="code"
type="number"
maxlength="1"
focus="{{item.focus}}"
hold-keyboard
bindinput="onInput"
id="{{item.id}}"
data-next="{{item.dataNext}}"
data-index="{{item.dataIndex}}"
data-before="{{item.dataBefore}}"
/>
</view>
</template>
<script>
data() {
return {
code: '',
focusIndex: null,
inputArray: [
{
focus: 'focus1',
id: 'input1',
dataIndex: '1',
dataBefore: '',
dataNext: 'input2'
},
{
focus: 'focus2',
id: 'input2',
dataIndex: '2',
dataBefore: 'input1',
dataNext: 'input3'
},
{
focus: 'focus3',
id: 'input3',
dataIndex: '3',
dataBefore: 'input2',
dataNext: 'input4'
},
{
focus: 'focus4',
id: 'input4',
dataIndex: '4',
dataBefore: 'input3',
dataNext: 'input5'
},
{
focus: 'focus5',
id: 'input5',
dataIndex: '5',
dataBefore: 'input4',
dataNext: 'input6'
},
{
focus: 'focus6',
id: 'input6',
dataIndex: '6',
dataBefore: 'input5',
dataNext: ''
}
]
}
},
onInput(e) {
const inputId = e.currentTarget.id
const index = e.currentTarget.dataset.index
const value = e.detail.value
const nextInput = e.currentTarget.dataset.next
const beforeInput = e.currentTarget.dataset.before
this.setData({
code: this.code + value,
focusIndex: index
})
// 当输入框的值达到maxlength长度时，自动跳转到下一个输入框
if (value.length === 1 && nextInput && index < 6) {
this.setData({
[`focus${nextInput.slice(-1)}`]: true // 设置下一个输入框聚焦
})
}
if (e.detail.keyCode === 8) {
if (value === '' && index > 1) {
this.setData({
[`focus${beforeInput.slice(-1)}`]: true, // 设置上一个输入框聚焦
code: this.code.slice(0, -1)
})
} else if (value === '' && index == 1) {
this.setData({
code: ''
})
}
}
},
</script>
