微信小程序 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 相关文章推荐
setAttribute 与 class冲突解决
Feb 17 Javascript
再论Javascript的类继承
Mar 05 Javascript
jQuery Ajax 实例全解析
Apr 20 Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
javascript中验证大写字母、数字和中文
Jan 15 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
js中最容易被忽视的事件问题大总结
May 15 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
angular-cli修改端口号【angular2】
Apr 19 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
可能被忽略的一些JavaScript数组方法细节
Feb 28 Javascript
JS实现手风琴特效
Nov 08 Javascript
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数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
php文件缓存方法总结
2016/03/16 PHP
php封装的验证码类分享
2017/02/26 PHP
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
百度搜索框智能提示案例jsonp
2016/11/28 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
手机端转换rem适应
2017/04/01 Javascript
使用ionic播放轮询广告的实现方法(必看)
2017/04/24 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
使用python检测主机存活端口及检查存活主机
2015/10/12 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
Django实现简单的分页功能
2021/02/22 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
群胜软件Java笔试题
2012/09/29 面试题
个人实用的自我评价范文
2013/11/23 职场文书
森林防火工作方案
2014/02/14 职场文书
计算机专业应届生求职信
2014/04/06 职场文书
班长竞选演讲稿
2014/04/24 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
学术研讨会主持词
2015/07/04 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
学校远程教育工作总结
2015/08/11 职场文书
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript
使用python绘制横竖条形图
2022/04/21 Python
Linux中文件的基本属性介绍
2022/06/01 Servers