Vue.js 限制只能输入金额的输入框_qq_38761701的博客-程序员宅基地_vue金额输入框

Vue.js 限制只能输入金额的输入框

import Vue from ‘vue’
// 自定义名字enterMoney
Vue.directive(‘enterMoney’, {
inserted: function(el) {
el.addEventListener(‘keypress’, function(e) {
e = e || window.event
const charcode = typeof e.charCode === ‘number’ ? e.charCode : e.keyCode
const re = /\d/
if (charcode === 46) {
// el.children[0].value是配合了el-input输入框使用的,使用input输入框时直接用el.value
// 只能输入一个小数点,超过一个则禁止输入
if (el.children[0].value.includes(’.’)) {
e.preventDefault()
}
return
} else if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
if (e.preventDefault) {
e.preventDefault()
} else {
e.returnValue = false
}
}
})
}
})

在这里插入图片描述
在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_38761701/article/details/105863359

智能推荐

vue.js实现只能输入数字的输入框

在软件开发网里,看了vue.js的教程,看完后,练练手,就试着实现了只能输入数字的输入框。在之前的博客里,用jquery也实现了这样的功能,这里用vue.js来实现,把实现的过程记录下来 如果只是一个输入框,要实现就...

Vue.js 限制只能输入金额的输入框

Vue.js 限制只能输入金额的输入框 import Vue from ‘vue’ // 自定义名字enterMoney Vue.directive(‘enterMoney’, { inserted: function(el) { el.addEventListener(‘keypress’, function(e) { e = e || ...

vue.js实现输入框输入值内容实时响应变化示例

主要介绍了vue.js实现输入框输入值内容实时响应变化,结合实例形式分析了vue.js使用v-model属性进行数据绑定的相关操作技巧,需要的朋友可以参考下

vue.js 实现输入框动态添加功能

主要介绍了vue.js 实现输入框动态添加功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

VUE.js实现动态设置输入框disabled属性

今天小编就为大家分享一篇VUE.js实现动态设置输入框disabled属性,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

vue-currency-input-轻松输入Vue.js的货币格式数字。-Vue.js开发

Vue货币输入Vue货币输入插件可轻松输入货币格式的数字。 它同时提供了一个独立的组件( )和自定义的Vue指令(v-currency),用于使用货币格式功能修饰现有的输入组件。 具有微小的捆绑包大小和零依赖关系键入时的...

Vue ElementUI实现:限制输入框只能输入正整数的问题

主要介绍了Vue ElementUI实现:限制输入框只能输入正整数的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

vue.js 输入框输入值自动过滤特殊字符替换中问标点操作

Input v-model=”relatedWords” type=”textarea” placeholder=”请输入” @input=’verifyInput(formItem.relatedWords)’/> verifyInput(v){ let _this=this; let punctuation = /[`[email protected]#$%^&*_\-=<>?:...

vue-cli4/vue-cil3使用process.env.VUE_APP_BASE_API全局地址代替vue-cli2的process.env.BASE_API

前几天Vue3.0正式发布,也说明了Vue3.0后面不会再有大规模改动,大家可以开始系统性学习了,虽然目前大多数公司使用的还是Vue2.0,但这只是一个过渡阶段,Vue3.0经历了两年的开发,在去年Vue2.0也引入了Vue3.0体验...

vue.js 输入框金额限制

vue.js 输入框金额限制 1、页面(有点丑): 2、代码: <html> <head> <title>输入框</title> <style> div#table_id{...

vue限制输入框只能输入8位整数和2位小数的代码

主要介绍了vue限制输入框只能输入8位整数和2位小数,文中我们使用v-model加watch 实现这一个功能,代码简单易懂,需要的朋友可以参考下

vue element-ui实现input输入框金额数字添加千分位

主要介绍了vue element-ui实现input输入框金额数字添加千分位,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

vue.js数字金额格式化_轻松输入Vue.js的货币格式数字

vue.js数字金额格式化 Vue货币输入 (Vue Currency Input) The Vue Currency Input plugin allows an easy input of currency formatted numbers. It provides both a standalone component (<currency-input>)...

latest_commits_via_vue.js-源码

初始化只有username输入框,输入username后显示repo信息,选择repo后显示branch信息,选择branch后显示最近提交信息和修改次数的输入框。 四列分栏,最左username,中间repo,紧接着branch,最右提交信息。 了解更多...

vue.js表单与v-model(一)----输入框

input元素结合v-model指令来实现双向绑定,当输入框输入内容变化时,绑定的变量的值发生变化;同样,当绑定变量的值发生变化,视图中输入框的值也会发生变化。其一般使用情景如下: html部分: <div id=&...

vue自定义指令限制输入框输入值的步骤与完整代码

主要给大家介绍了关于vue自定义指令限制输入框输入值的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

(./node_modules/[email protected]@css-loader/dist/cjs.js!./node_modules/[email protected]@vue-loade

{ test: /\.stylus$/, ...'vue-style-loader', 'css-loader', 'stylus-loader', //这个放到最后就没有上面的错误了 { loader: 'postcss-loader', options: { sourceMap: true } }, ] }, ...

../node_modules/[email protected]@css-loader/dist/cjs.js??ref--8-oneOf-1-1!../node_modules/_vue-

开发环境 vuecli4 问题描述: 使用@import引入.scss文件时报错: 原因: @import url('./common.scss'); 解决: @import './common.scss'; tmd Fuck!!!!

JS通过正则限制 input 输入框只能输入整数、小数(金额或者现金) 两位小数

第一: 限制只能是整数 <input type = "text" name= "number" id = 'number' onkeyup= "if(! /^d+$/.test(this.value)){alert('只能整数');this.value='';}" /> 如果不是整数就直接alert 第二: 限制...

Vue.js数字输入框组件使用方法详解

主要为大家详细介绍了Vue.js数字输入框组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

Vue.js实现输入框绑定的实例代码

vue.js数据动态编辑</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> /* 在Vue实例没有准备好之前...

vue表单验证之禁止input输入框输入空格

测试小姐姐让输入框不允许输入空格,安排。  刚开始用的下面这个方法,因为我是电脑端f12的情况下调试移动端,所以下面这个方法可以实现禁止输入空格,于是就打包测试上线了,上线后才发现真机中不支持,应该是pc端...

随便推点

推荐文章

热门文章

相关标签