条件：

要求：
1.手机号不管是直接输入还是复制粘贴都保持334
2.点击字符中间，光标就在那个位置，点击删除键，光标就随之向前移动一位；同时在光标处添加数字光标往后移动一位

代码如下：

涉及三个知识点：
1、keydown ：当按钮被按下时，发生 keydown 事件。
2、keyup：当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
3、paste：当向 p 元素上粘贴文本内容时执行 JavaScript (注意 contenteditable 设置为 “true”)。
例如：<p contenteditable="true" onpaste="myFunction()">尝试在段落中粘贴内容。</p>

<template><div class="mobile_input_box flex_align_center flex_SB"><input v-model="mobile" type="tel" ref="mobile" maxlength="13" placeholder="请输入手机号"@keyup="keyupPaste" @paste="keyupPaste" @keydown="onKeydown"  /></div>
</template>

<script> export default {data() {return { mobile: "", }},  methods: {onKeydown(e) { var input = e.target;var selectionLeft = input.value.substring(input.selectionStart - 1, input.selectionEnd);var selectionRight = input.value.substring(input.selectionStart, input.selectionEnd + 1);//碰到空格，往前移动一位光标var selectionStart = input.selectionStart;if (e.keyCode === 8 && selectionLeft === " " && selectionRight) {input.selectionStart = selectionStart - 1;input.selectionEnd = input.selectionStart;e.preventDefault();}},keyupPaste(e) { this.formatMobile(e)this.mobile = this.$refs.mobile.value},formatMobile(e) {let val = this.$refs.mobile.value let selStart = this.$refs.mobile.selectionStart let mobileLen = val.lengthlet value = this.getValue(e, val).substr(0, 11) // 获取输入/粘贴内容,并截取前11位let len = value.lengthif (len > 3 && len < 8) {value = value.replace(/^(\d{3})/g, '$1 ')} else if (len >= 8) {value = value.replace(/^(\d{3})(\d{4})/g, '$1 $2 ')}this.$refs.mobile.value = valueif (selStart !== mobileLen) {// 设置光标位置this.$refs.mobile.selectionStart = this.$refs.mobile.selectionEnd = selStart}let aa = this.$refs.mobile.value.replace(/\D/g, '')if (aa.length == 11) {alert(aa.length) //这里可以做满足条件后的处理}},getValue(e, val) {let value = ''if (e.type === 'keyup') {value = val.replace(/\D/g, '');} else if (e.type === 'paste') {// window.clipboardData：IE浏览器获取剪贴板数据对象// event.clipboardData：Chrome, Firefox, Safari获取剪贴板数据对象let clipboardData = event.clipboardData || window.clipboardData;value = clipboardData.getData('Text'); // 获取剪贴板text格式的数据value = value.replace(/\D/g, '')}return value}, }
}
</script>

参考代码 https://www.cnblogs.com/qdwyy/p/10854014.html

vue 手机号（334分隔）相关推荐

vue,原生html—input框输入银行卡4位分开、手机号344分隔
vue,原生html-input框输入银行卡4位分开.手机号344分隔效果图: 1.uni-app写input框 (注意type类型不能为number,这是一个坑,我理解到-数字框只能输入数字不能显 ...
vue手机号中间四位加*号
vue手机号中间四位加*号 1.在methods里面写一个方法: mobileStr(str) {if(str.length>7){return str.substring(0,3)+'**** ...
Vue手机号正则匹配，姓名加密展示
一丶手机号 (1)正则匹配 if (!/^1[3|4|5|6|7|8|9]\d{9}$/.test(13807999985)) {console.log(resultPhone);//138****9 ...
el vue 手机号_Vue实现数字输入框中分割手机号码实例教程
本文主要介绍了Vue实现数字输入框中分割手机号码的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. 需求在移动端弹出系统数字键盘,输入手机号码的时 ...
el vue 手机号_Vue 正则表达式验证邮箱和手机号码
el-form绑定:rules="addFormRules": el-form-item绑定prop="name" 2.正则表达式验证邮箱和手机号码 expor ...
Vue.js实现可配置的登录表单
表单是后台项目业务中的常用组件,这次重构了登录功能以满足登录方式可配置的需求,在此记录和分享一下. 业务场景在之前,项目只支持手机号+密码登录,前端是直接把表单写死的,后来有客户希望能支持验证码登录 ...
将苹果通讯录.contacts文件导入安卓通讯录提取.contacts文件联系人的教程
我们知道苹果的通讯录是.contacts文件我们备份后,但是苹果手机丢失了怎么利用这个文件恢复到新买的安卓通讯录呢?其实这个并不简单,我们用记事本打开看到里面的内容乱码,明显加过密,所以不能直接手动恢 ...
吉信通短信接口(HTTP协议) java
最近学习了吉信通接口的内容,做了简单的短信对接功能.和大家分享一下吉信通短信接口(HTTP协议).吉信通官网上也有相关的代码示例. 吉信通官网:http://www.winic.org/api/Sen ...
Vue2积分商城PC端项目(一)
目录一.清空项目非必要文件二.样式初始化三.网站结构布置四.网站数据请求模块 4.1.发起请求 4.2.代理配置 4.3.API与Request封装 4.4.发起请求五.头部组件 5.1.版 ...

vue 手机号（334分隔）

条件：

代码如下：

vue 手机号（334分隔）相关推荐

最新文章

热门文章