微信小程序微信小程序 input输入框控件详解及实例（多种示例）输入框控件详解及实例（多种示例）
主要介绍了微信小程序 input输入框控件详解及实例（多种示例）的相关资料,输入框在程序中是最常见的，登
录，注册，获取搜索框中的内容等等都需要，需要的朋友可以参考下
微信小程序微信小程序 input输入框控件输入框控件
今天主要详写一下微信小程序中的Input输入框控件，输入框在程序中是最常见的，登录，注册，获取搜索框中的内容等等都
需要，同时，还需要设置不同样式的输入框，今天的代码中都要相应的使用。
首先主页面中将登录的样式进行了简单展示和使用，
代码如下：
<!--index.wxml-->
<!--如果在同一个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
})
}
weixin_38730129
- 粉丝: 7
- 资源: 927
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- RTL8188FU-Linux-v5.7.4.2-36687.20200602.tar(20765).gz
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
- SPC统计方法基础知识.pptx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0