微信小程序 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验证电子邮箱的函数
Aug 22 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
javascript实现下拉提示选择框
Dec 29 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
JavaScript驾驭网页-CSS与DOM
Mar 24 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
详解webpack性能优化——DLL
Oct 20 Javascript
解决vue路由后界面没有变化,但是链接有的问题
Sep 01 Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
细说Vue组件的服务器端渲染的过程
May 30 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
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
鼠标经过tr时,改变tr当前背景颜色
2014/01/13 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
JavaScript实现打印星型金字塔功能实例分析
2017/09/27 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
python 读取二进制 显示图片案例
2020/04/24 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
美国羊皮公司:Overland
2018/01/15 全球购物
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
名企HR怎样看待求职信
2014/02/23 职场文书
安全责任书范文
2014/03/12 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
个人工作主要事迹
2014/05/08 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
八年级英语教学计划
2015/01/23 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
运动会新闻稿
2015/07/17 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电