微信小程序 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 相关文章推荐
JavaScript使用prototype定义对象类型(转)[
Dec 22 Javascript
JavaScript XML操作 封装类
Jul 01 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 Javascript
javascript 中的try catch应用总结
Apr 01 Javascript
JS实现按钮颜色切换效果
Sep 05 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
Javascript通过控制类名更改样式
May 24 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 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
一个oracle+PHP的查询的例子
2006/10/09 PHP
关于页面优化和伪静态
2009/10/11 PHP
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
PHP的全局错误处理详解
2016/04/25 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
Bootstrap模块dropdown实现下拉框响应
2016/05/22 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
vue实现记事本功能
2019/06/26 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
Python绘制七段数码管实例代码
2017/12/20 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
工作个人的自我评价
2014/01/14 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
三潭印月的导游词
2015/02/12 职场文书
应聘教师求职信范文
2015/03/20 职场文书