微信小程序 input输入框控件详解及实例(多种示例)


Posted in Javascript onDecember 14, 2016

微信小程序 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
 })
 }
 },
 //重置按钮点击事件
 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="section__title">你输入的是:{{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输入框控件详解及实例(多种示例)微信小程序 input输入框控件详解及实例(多种示例)

 源码下载地址:DEMO

 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
这段js代码得节约你多少时间
Dec 20 Javascript
web性能优化之javascript性能调优
Dec 28 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 Javascript
JS正则表达式比较常见用法
Jan 26 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
js实现百度淘宝搜索功能
Feb 17 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 Javascript
原生js+css实现tab切换功能
Sep 17 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 #Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 #Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 #Javascript
微信小程序 scroll-view组件实现列表页实例代码
Dec 14 #Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 #Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 #Javascript
AngularJS指令与指令之间的交互功能示例
Dec 14 #Javascript
You might like
php 301转向实现代码
2008/09/18 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
原生js实现验证码功能
2017/03/16 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
python中Flask框架简单入门实例
2015/03/21 Python
详解Python3的TFTP文件传输
2018/06/26 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
德国旅游网站:weg.de
2018/06/03 全球购物
软件测试工程师面试问题精选
2016/10/28 面试题
超市促销实习自我鉴定
2013/09/23 职场文书
大学生简单自荐信
2013/11/10 职场文书
中层干部岗位职责
2013/12/18 职场文书
旷课检讨书3000字
2014/02/04 职场文书
动物科学专业求职信
2014/07/27 职场文书
银行党员批评与自我批评
2014/10/15 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
如何撰写创业策划书
2019/06/27 职场文书