Vue实现数字输入框中分割手机号码的示例
2017-10-10 14:46
1096 查看
需求
在移动端弹出系统数字键盘,输入手机号码的时候,使用344形式分割。
分析:
- 首先,如果要在移动端弹出数字键盘,并且还可以有空格,那么就要使用type="phone"的input框
- 如果要实现输入的时候增加空格,删除的时候减少空格,那么就要使用watch
- 手机号码为11位,加上两个空格,最多13位,因此要限定长度
代码实现
<body> <div id="app"> <!-- 类型为phone,最大长度为13 --> <input type="phone" v-model="dataPhone" maxlength="13"> </div> </body> <script> var vm = new Vue({ el: '#app', data() { return { dataPhone: '' } }, watch: { // 通过watch来设置空格 dataPhone(newValue, oldValue) { if (newValue.length > oldValue.length) { // 文本框中输入 if (newValue.length === 3 || newValue.length === 8) { this.dataPhone += ' ' } } else { // 文本框中删除 if (newValue.length === 9 || newValue.length === 4) { this.dataPhone = this.dataPhone.trim() } } } } }) </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- vue实现手机号码抽奖上下滚动动画示例
- vue.js实现输入框输入值内容实时响应变化示例
- android中实现手机号码的校验的示例代码
- vue.js实现带日期星期的数字时钟功能示例
- angular 实现的输入框数字千分位及保留几位小数点功能示例
- android采用MediaPlayer监听EditText实现语音播报手机号码(阿拉伯数字)
- Python实现随机生成有效手机号码及身份证功能示例
- 做单数字每格的自定义手机号码输入框
- Vue.js实现的表格增加删除demo示例
- Swift算法实现字符串转数字的方法示例
- Vue模拟数据,实现路由进入商品详情页面的示例
- Java使用正则表达式实现找出数字功能示例
- android:获取手机号码和姓名实现通讯录
- js实现input输入框只能输入数字的功能(完美测试通过)
- H5手机页面实现调取手机拨号界面并完成号码输入
- Android实现的数字格式化用法示例
- WPF 邮箱输入框提示 和 手机号码验证
- vue 实现数字滚动增加效果的实例代码
- vue实现消息的无缝滚动效果的示例代码
- Java实现的求解经典罗马数字和阿拉伯数字相互转换问题示例