富贵资源网 Design By www.hznty.com

JavaScript实现手机号码 3-4-4格式

手机号实现3-4-4格式相对来说还是比较简单的,监听input事件,实时的获取手机号码,然后根据手机号码的长度做截取和拼接的操作,即可实现手机格式的处理,实现格式的处理之后,我们还需要支持在指定光标进行新增和删除操作的时候光标不移动到最后面,因为手机号的格式使我们重置的,监听input事件重新赋值之后光标会移动到最后一位,解决这个问题的办法就是记录光标的位置并在value值格式重置之后重新设置光标的位置,好了,思路就是这样的,话不多说,直接上代码

// An highlighted block
 <input
  ref="inputRef"
  class="life-input"
  v-model="value"
  :maxlength="13"
  :placeholder="哈哈哈哈哈"
  :pattern="[0-9]*"
  @input="onInput"
 />

// javascript
onInput(){
 val = this.value.replace(/\D/g, '').substring(0, 11);
 const nowIndex = this.getCursortPosition(this.$refs.inputRef);
 if (valueLen > 3 && valueLen < 8) {
 this.value = `${val.substr(0, 3)} ${val.substr(3)}`;
 } else if (valueLen >= 8) {
 this.value = `${val.substr(0, 3)} ${val.substr(
  3,
  4
  )} ${val.substr(7)}`;
 } else {
 this.value = val;
 }
 // 重新赋值之后设置光标的位置
this.setCurIndex(nowIndex, this.curInputObj.value);
},

 getCursortPosition(element) {
 let CaretPos = 0;
 if (document.selection) {
 // 支持IE
 element.focus();
 const Sel = document.selection.createRange();
 Sel.moveStart('character', -element.value.length);
 CaretPos = Sel.text.length;
 } else if (element.selectionStart || element.selectionStart === '0'){
 // 支持firefox
 CaretPos = element.selectionStart;
 }
 return CaretPos
 },

 setCurIndex(nowIndex, value) {
 const len = value.length;
 setTimeout(() => {
 let pos = nowIndex;
 // 新增操作
 if (len > this.oldLen) {
  if (nowIndex === 4 || nowIndex === 9) {
  pos += 1;
  }
 } else if (len > this.oldLen) {
  // 删除操作
  if (nowIndex === 4 || nowIndex === 9) {
  pos -= 1;
  }
 }
 this.$refs.inputRef.selectionStart = pos;
 this.$refs.inputRef.selectionEnd = pos;
 this.oldLen = this.curInputObj.value.length;
 }, 0);
 },

总结

富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。