這篇文章主要介紹了微信小程式input輸入框控制項詳解及實例（多種範例）的相關資料,輸入框在程式中是最常見的，登錄，註冊，取得搜尋框中的內容等等都需要，需要的朋友可以參考下
微信小程式input輸入框控制項
今天主要詳寫一下微信小程式中的Input輸入框控件，輸入框在程式中是最常見的，登錄，註冊，取得搜尋框中的內容等等都需要，同時，還需要設定不同樣式的輸入框，今天的程式碼中都要相應的使用。
首先主頁面中將登入的樣式進行了簡單展示和使用，
#程式碼如下：
<!--如果在同一个form表单中创建了多个input输入框，可以给给每个输入框，创建自己的
name=“userName”属性，可以区别哪个输入框，并通过添加
属性提交：bindsubmit="方法名" 重置：bindreset="方法名"，达到清除输入框内容的目的
js文件中的用法，e.detail.value.userName.length-->
<view class="itemView">用户名：
<input class="input" name="userName" placeholder="请输入用户名"
bindinput="userNameInput"/>
</view>
<view class="itemView">密 码：
<input class="input" password placeholder="请输入密码"
bindinput="passWdInput" />
</view>
<view class="viewName" style="background-color:#fbf9fe">
<button class="loginBtn" bindtap="loginBtnClick">登录</button>
<button class="resetBtn" bindtap="resetBtnClick">清除</button>
</view>
<view>{{infoMess}}</view>
<view>{{userName}}</view>
<view>{{passWd}}</view>
<view class="viewName" style="margin-top: 60px;">
<navigator url="Component/TextInput/TextInput">
<text class="view-Name">各类型输入框展示</text>
</navigator>
</view>//index.js
//获取应用实例
var app = getApp()
Page({
data: {
infoMess: '',
userName: '',
userN:'',
passWd: '',
passW:''
},
//用户名和密码输入框事件
userNameInput:function(e){
this.setData({
userN:e.detail.value
})
},
passWdInput:function(e){
this.setData({
passW:e.detail.value
})
},
//登录按钮点击事件，调用参数要用：this.data.参数；
//设置参数值，要使用this.setData({}）方法
loginBtnClick:function(){
if(this.data.userN.length == 0 || this.data.passW.length == 0){
this.setData({
infoMess:'温馨提示：用户名和密码不能为空！',
})
}else{
this.setData({
infoMess:'',
userName:'用户名：'+this.data.userN,
passWd:'密码：'+this.data.passW
})
}
},
//重置按钮点击事件
resetBtnClick:function(e){
this.setData({
infoMess: '',
userName: '',
userN:'',
passWd: '',
passW:'',
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
}
})然後在第二個介面中顯示了不同的樣式和功能的input
<!--pages/index/Component/TextInput/TextInput.wxml-->
<view class="viewTitle">
<text class="view-Name">TextInput输入框展示</text>
<view class="lineView"></view>
</view>
<view class="section">
<input class="input" placeholder-style="font-size:15px"
placeholder="自动聚焦弹出键盘，一个页面中只能有一个" auto-focus/>
</view>
<view class="section">
<input class="input" placeholder="此处只有在点击下方按钮时才聚焦" focus="{{focus}}" />
</view>
<view class="section1">
<button bindtap="bindButtonTap">使得输入框获取焦点</button>
</view>
<view class="section">
<input class="input" maxlength="10" placeholder="最大输入长度10" />
</view>
<view class="sectiontitle">你输入的是：{{inputValue}}</view>
<view class="section">
<input class="input" bindinput="bindKeyInput" placeholder="输入同步到view中"/>
</view>
<view class="section">
<input class="input" bindinput="bindReplaceInput" placeholder="连续的两个1会变成2" />
</view>
<view class="section">
<input class="input" bindinput="bindHideKeyboard" placeholder="输入123自动收起键盘" />
</view>
<view class="section">
<input class="input" type="number" placeholder="这是一个数字输入框" />
</view>
<view class="section">
<input class="input" password type="text" placeholder="这是一个密码输入框" />
</view>
<view class="section">
<input class="input" type="digit" placeholder="带小数点的数字键盘"/>
</view>
<view class="section">
<input class="input" type="idcard" placeholder="身份证输入键盘" />
</view>
<view class="section">
<input class="input" placeholder-style="color:red" placeholder="占位符字体是红色的" />
</view>// pages/index/Component/TextInput/TextInput.js
Page({
data: {
focus: false,
inputValue: ''
},
bindButtonTap: function() {
this.setData({
focus: true
})
},
bindKeyInput: function(e) {
this.setData({
inputValue: e.detail.value
})
},
bindReplaceInput: function(e) {
var value = e.detail.value
var pos = e.detail.cursor
if(pos != -1){
// 光标在中间
var left = e.detail.value.slice(0,pos)
// 计算光标的位置
pos = left.replace(/11/g,'2').length
}
// 直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置
return {
value: value.replace(/11/g,'2'),
cursor: pos
}
// 或者直接返回字符串,光标在最后边
// return value.replace(/11/g,'2'),
},
bindHideKeyboard: function(e) {
if (e.detail.value === "123") {
//收起键盘
wx.hideKeyboard()
}
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})效果圖：
以上是微信開發之input控制項的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
