网站后台策划,网站制作计划书模板,什么是门户网站广告,微商各种软件拿码渠道首先说明输入框中的格式限制如下#xff1a;
#xff08;1#xff09;当第一位为0时#xff0c;第二位只能输入小数点#xff0c;且不能输入其他数字#xff08;如00#xff09;
#xff08;2#xff09;当第一位不为0时#xff0c;后边不限制
#xff08;3…首先说明输入框中的格式限制如下
1当第一位为0时第二位只能输入小数点且不能输入其他数字如00
2当第一位不为0时后边不限制
3数据中只能输入一个小数点
4小数点后边保留2位 方案一当输入后在输入框中显示然后检验输入内容去掉不符合规则的数据
优点实现方式比较简单通用于大多数平台web端、移动端
缺点输入框中会显示一下历史不符合规则的输入的数据然后消失
不说废话直接上代码
input typetext v-modelinputValue inputhandleInput /const inputValue ref()/*** 功能 数据格式校验【保留2位小数】* e: input返回的值*/
const handleInput (e: any) {// 一定要加nextTick否则特殊情况的更改不生效【如000时更改为0】nextTick(() {let value e.detail.value// 如果当前输入为空直接允许清空if (!value) {inputValue.value } else if (value?.charAt(0) 0 value.charAt(1) value.charAt(1) ! .) {// // 1. 当第一位为0时只能输入小数点【第二位必须是小数点】value 0}value value.replace(/[^\d.]/g, ) // 清除数字和.以外的字符value value.replace(/\.{2,}/g, .) // 只保留第一个. 清除多余的value value.match(/^\d*(\.?\d{0,2})/g)[0] || // 保留2位小数inputValue.value value})
}
注意在handleInput方法中一定要使用nextTick,否则部分赋值无效 方案二使用自定义指令限制输入框的内容不符合条件的无法输入
优势用户体验更好使用更方便
缺点由于uni-app对input做了一些包装故该实现方法需要根据实际情况进行修改
1自定义指令
import type { Directive, App } from vue/*** 输入框文本输入限制*/
export const keepTwoDecimal: Directive {mounted(el, binding) {el.addEventListener(input,(e: any) {try {let value e.target.value// 1. 当第一位为0时只能输入小数点【第二位必须是小数点】if (value.charAt(0) 0 value.length 1 value.charAt(1) ! .) {value 0} else {// 当input的type不为text时输入小数时光标会前移此处需要手动将光标后移(虽然此处的代码抛出了异常但是解决了光标前移的问题)// if (e.data .) {// e.target.selectionStart value.length 1// e.target.selectionEnd value.length 1// }value value.replace(/[^\d.]/g, ) // 清除数字和.以外的字符value value.replace(/\.{2,}/g, .) // 只保留第一个. 清除多余的value value.match(/^\d*(\.?\d{0,2})/g)![0] || // 保留2位小数}e.target.value value} catch (e) {throw new Error(输入时发生异常)}},true,) // 由于uni-app中渲染原生的input时增加了dom解构此处无法直接获取input标签的输入事件故设置为true添加向下捕获事件},
}export function setupInputDirective(app: App) {app.directive(input-decimal, keepTwoDecimal)
}
2使用方法
input classinput typetext v-input-decimal inputmodenumeric v-modelinputValue placeholder请输入 /
注意
1在自定义指令中addEventListener的监听方法中要添加向下的捕获事件因为uni-app将input包括了多层即在其后边多传一个参数true表示向下捕获.
2在使用时直接使用“v-input-decimal”指令即可
3如果在输入时想直接调起数字键盘需要添加inputmodenumeric属性
4如果type不等于text时输入小数点时光标会前移为了解决此问题需要在自定义指令中添加额外的判断自定义的代码中已添加注释说明 以上思路为自己在工作中的经验总结如有问题欢迎大家留言讨论 本问为作者原创如有需要请注明出处尊重原创十分感谢
