微信小程序 input输入框详解及简单实例


Posted in Javascript onJanuary 10, 2017
微信小程序输入框input

相关文章:

微信小程序 Button

微信小程序 radio

微信小程序 slider

微信小程序 switch

微信小程序 textarea

微信小程序 picker-view

微信小程序 picker

微信小程序 label

微信小程序 input 

微信小程序 form

微信小程序 checkbox

实现效果图:

微信小程序 input输入框详解及简单实例

微信小程序输入框input
属性名 类型 默认值 说明
value String   输入框的内容
type String text input的类型,有效值:text,number,idcard,digit,time,date
password Boolean false 是否是密码类型
placeholder String   输入框为空时占位符
placeholder-style String   指定placeholder的样式
placeholder-class String input-placeholder 指定placeholder的样式类
disabled Boolean false 是否禁用
maxlength Number 140 最大输入长度,设置为0的时候不限制最大长度
auto-focus Boolean false 自动聚焦,拉起键盘。页面中只能有一个input设置auto-focus属性
focus Boolean false 使得input获取焦点
bindchange EventHandle   输入框失去焦点时,触发bindchange事件,event.detail={value:value}
bindinput EventHandle   除了date/time类型外的输入框,当键盘输入时,触发input事件,event.detail={value:value},处理函数可以直接return一个字符串,将替换输入框的内容。
bindfocus EventHandle   输入框聚焦时触发,event.detail = {value:value}
bindblur EventHandle   输入框失去焦点时触发,event.detail = {value:value}
示例代码:
<!--input.wxml-->
<view class="section">
 <input placeholder="这是一个可以自动聚焦的input" auto-focus/>
</view>
<view class="section">
 <input placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
 <view class="btn-area">
 <button bindtap="bindButtonTap">使得输入框获取焦点</button>
 </view>
</view>
<view class="section">
 <input maxlength="10" placeholder="最大输入长度10" />
</view>
<view class="section">
 <view class="section__title">你输入的是:{{inputValue}}</view>
 <input bindinput="bindKeyInput" placeholder="输入同步到view中"/>
</view>
<view class="section">
 <input bindinput="bindReplaceInput" placeholder="连续的两个1会变成2" />
</view>
<view class="section">
 <input bindinput="bindHideKeyboard" placeholder="输入123自动收起键盘" />
</view>
<view class="section">
 <input type="emoji" placeholder="这是一个带有表情的输入框" />
</view>
<view class="section">
 <input password type="number" />
</view>
<view class="section">
 <input password type="text" />
</view>
<view class="section">
 <input type="digit" placeholder="带小数点的数字键盘"/>
</view>
<view class="section">
 <input type="idcard" placeholder="身份证输入键盘" />
</view>
<view class="section">
 <input placeholder-style="color:red" placeholder="占位符字体是红色的" />
</view>
//input.js
Page({
 data:{
 focus:false,
 inputValue:""
 },
 bindButtonTap:function(){
 this.setData({
 focus:Date.now()
 })
 },
 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();
 }
 }
})
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
Javascript 相关文章推荐
jquery中:input和input的区别分析
Jul 13 Javascript
JS实现可改变列宽的table实例
Jul 02 Javascript
jQuery实现动画效果的简单实例
Jan 27 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
Dec 18 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
解决layui轮播图有数据不显示的情况
Sep 16 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 Javascript
微信小程序 form组件详解及简单实例
Jan 10 #Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 #Javascript
使用vue.js实现联动效果的示例代码
Jan 10 #Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 #Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 #Javascript
jQuery zTree树插件简单使用教程
Jan 10 #Javascript
详解JS中的快速排序与冒泡
Jan 10 #Javascript
You might like
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
PHP中time(),date(),mktime()区别介绍
2013/09/28 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
php处理复杂xml数据示例
2016/07/11 PHP
php简单统计中文个数的方法
2016/09/30 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
js获取当前日期前七天的方法
2015/02/28 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
2017/03/02 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
javascript实现考勤日历功能
2018/11/29 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
Python变量和字符串详解
2017/04/29 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
优秀党员获奖感言
2014/02/18 职场文书
法律七进实施方案
2014/03/15 职场文书
留学顾问岗位职责
2014/04/14 职场文书
2015年财政所工作总结
2015/04/25 职场文书
opencv深入浅出了解机器学习和深度学习
2022/03/17 Python
Win11软件图标固定到任务栏
2022/04/19 数码科技