Vue实现数字输入框中分割手机号码的示例


Posted in Javascript onOctober 10, 2017

需求

在移动端弹出系统数字键盘,输入手机号码的时候,使用344形式分割。

分析:

  1. 首先,如果要在移动端弹出数字键盘,并且还可以有空格,那么就要使用type="phone"的input框
  2. 如果要实现输入的时候增加空格,删除的时候减少空格,那么就要使用watch
  3. 手机号码为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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
Mar 19 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
jquery表单验证插件validation使用方法详解
Jan 20 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 Javascript
JS判断数组那点事
Oct 10 #Javascript
template.js前端模板引擎使用详解
Oct 10 #Javascript
AngularJS中table表格基本操作示例
Oct 10 #Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 #Javascript
JavaScript实现计数器基础方法
Oct 10 #Javascript
JS实现合并json对象的方法
Oct 10 #Javascript
jQuery实现的form转json经典示例
Oct 10 #jQuery
You might like
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
php mysql 判断update之后是否更新了的方法
2012/01/10 PHP
关于PHP结束标签的使用细节探讨及联想
2013/03/04 PHP
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
详解Chai.js断言库API中文文档
2018/01/31 Javascript
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
Python的语言类型(详解)
2017/06/24 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
python生成随机红包的实例写法
2019/09/02 Python
Python Celery多队列配置代码实例
2019/11/22 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
学习两会精神心得范文
2014/03/17 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
爱护公物标语
2014/06/24 职场文书
运动会演讲稿300字
2014/08/25 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
2016国庆促销广告语
2016/01/28 职场文书
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android