微信小程序输入框大全
来源:互联网 发布:什么是网络存储 编辑:程序博客网 时间:2024/05/21 00:21
结构部分
<!--page/component/component-pages/input/input.wxml-->
<!--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 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:green" placeholder="设置placeholder 的颜色" />
</view>
js部分
// page/component/component-pages/input/input.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()
}
}
})
- 微信小程序输入框大全
- 微信小程序开发----输入框重影
- 微信小程序---获取输入框(input)内容
- 微信小程序 快捷键 大全
- 微信小程序案例 大全
- 总结:微信小程序入口大全
- 微信小程序源码案例大全
- 微信小程序实例源码大全
- 微信小程序实例源码大全
- 微信小程序实例源码大全
- 微信小程序实例源码大全
- 微信小程序实例源码大全
- 微信小程序 只能输入数字
- 微信小程序大全:767个小程序
- 微信小程序基础之input输入框控件
- 微信小程序基础之input输入框控件
- 微信小程序---获取循环输入框(input)中的内容
- 微信小程序---点击按钮添加、删除输入框(input)
- hdu Card Game
- leetcode-273-Delete Node in a Linked List
- codeforces 392 div2 D ability to convert
- 蓝桥杯心得
- 配置maven环境和创建第一个maven项目
- 微信小程序输入框大全
- 九数组分数
- 2017寒假练习赛总结(实时更新)
- Spark深入第一步DAGScheduler
- 深度搜索【基本解题方法】【总结】
- hdu 5210 Delete
- windows sftp客户端与树莓之间通过ssh互传文件
- 欢迎使用CSDN-markdown编辑器
- C语言-----开发工具的使用shell