html 只能输入正数,vue 限制input只能输入正数

在某些项目中 input 框只能输入数字，可以用以下办法：

先在标签上绑定上 @input 事件来监听标签的值变化，通过正则来改变输入的值。

第二部封装个自定义指令放在标签上！

directives: {

numberOnly: {

bind: function(el) {

el.handler = function() {

el.value = Number(el.value.replace(/\D+/, ''))

}

el.addEventListener('input', el.handler)

unbind: function(el) {

el.removeEventListener('input', el.handler)

}

接下来就可以去页面看效果了，只能输入数字且只是正数！

附上 element 的 input 样式代码

.keep_input {

-webkit-appearance: none;

background-color: #fff;

background-image: none;

border-radius: 4px;

border: 1px solid #dcdfe6;

-webkit-box-sizing: border-box;

box-sizing: border-box;

color: #606266;

display: inline-block;

font-size: inherit;

outline: 0;

padding: 0 15px;

-webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

height: 30px;

line-height: 30px;

text-align: left;

}

.keep_input:focus {

border-color: #54a6de;

outline: 0;

}

html 只能输入正数,vue 限制input只能输入正数相关推荐

java中限制只能为正数_vue 限制input只能输入正数的操作
在某些项目中 input 框只能输入数字,可以用以下办法: 先在标签上绑定上 @input 事件来监听标签的值变化,通过正则来改变输入的值. class="keep_input" ...
vue 设置input只能输入数字
方法一: 将<input>标签中的type属性直接设置为number就可以达到只能输入数字.优点:他直接能唤起数字键盘,缺点:它只能作用于网页端,在手机输入的话还是可以输入汉字或英 ...
js 只准输入数字_js 限制input只能输入数字
onKeyUp="this.value=this.value.replace(/[^\.\d]/g,'');if(this.value.split('.').length>2){thi ...
php限制只能输入中文,JS控制Input只能输入数字，汉字，英文的限制方法
2 楼 shuke[2013-10-30 14:05] 以上是图片替代 SUBMIT提交的方法, 正则表达式限制文本框只能输入数字许多时候我们在制作表单时需要限制文本框输入内容的类型,下面我们用正则 ...
python用input输入list_python怎么用input函数输入一个列表
python怎么用input函数输入一个列表,函数,的是,数字,没有任何,赋值 python怎么用input函数输入一个列表易采站长站,站长之家为您整理了python怎么用input函数输入一个列表 ...
html 文本框输入,HTML文本框INPUT无法输入的解决
HTML文本框INPUT无法输入的解决查看,READONLY和DISABLE属性都是OK的.. 在IE下是可以正常输入的的..但是在TT,等基于IE的浏览器下也无法输入..在FF,CHROME下输入 ...
vue 中input的输入验证
在vue中用最普通的input对内容做限制比较容易,但是没有样式,比较丑,比如只能输入文字(以下都以文字为例),直接对其值正则匹配即可 >查看其他匹配的方法< <input typ ...
vue中@input事件输入英文验证，切换中文文输入法验证错乱的解决方法：compositionstart和compositionend事件
最近做需求,遇到一个vue中输入4位英文判断图形验证的问题.就这个问题测试提了六七个bug,实属把握整不会了.下面就最主要的一个问题写一下解决方法: 需求详情:oninput事件输出长度为4位时,判断 ...
vue 禁止input输入框输入特殊字符和汉字
<el-form-item label="微信"><el-input placeholder="请输入微信" v-model="fo ...

html 只能输入正数,vue 限制input只能输入正数

html 只能输入正数,vue 限制input只能输入正数相关推荐

最新文章

热门文章