el-input输入框的一些限制_el-input不能输入小数点-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_48985355/article/details/135553309

方法一：

通过设置type属性：type="number"，style去掉后面的上下按钮，如下图：

<el-input v-model="" type="number" class="num-input" clearable />
 
<style>
.num-input input::-webkit-outer-spin-button,
.numinput input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.num-input input[type="number"]{
    -moz-appearance: textfield;
}
.num-input input{
    border: none
}
</style>

在style中写当前页面的样式时使用scoped，此时需要使用::v-deep（vue2）:deep(）（vue3）

方法二：

通过绑定值限制的方式：v-model.number="aaa",这种方式会限制一般的数字，但是会影响maxlengt属性，并且e是可以输入的，一般情况可以使用，严格限制的话不建议使用

缺点：maxlength不生效，可以输入e，可以输入小数点

<el-input v-model.number="aaa"></el-input>

方法三：使用正则表达式oninput/οnkeyup（建议使用）

通过对value值进行正则限制：οnkeyup="value=value.replace(/[^\d]/g,' ')"，绑定一个onkeyup监听事件，/[^\d]/g 是用来匹配所有非数字内容的正则表达式，将之替换成空字符串，这种方式不会影响任何属性，推荐使用

<el-input v-model="aaa" οnkeyup="value=value.replace(/[^\d]/g,'')"></el-input>

只允许输入数字(整数：小数点不能输入)

<input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" >

允许输入小数(两位小数)

<input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:.\d{0,2})?).*$/g, '$1')" >

允许输入小数(一位小数)

<input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:.\d{0,1})?).*$/g, '$1')" >

//下面为输入框示例代码  只能输入正数且保留1位小数点
<el-input
  v-model="value"
  size="mini"
  oninput="
      this.value=this.value.replace(/[^\d.]/g,"")  //清除“数字”和“.”以外的字符
     .replace(/\.{2,}/g,".") // 只保留第一个. 清除多余的
     .replace(".","$#$").replace(/\./g,"").replace("$#$",".").replace(/^(\-)*(\d+)\.(\d).*$/,'$1$2.$3').replace(/^\./g,"")
     // 只能输入1个小数
     .replace(/^0+(\d)/, '') // 第一位0开头，0后面为数字，则过滤掉，取空
   "
/>

// (\d\d)部分就是增加保留小数点位数的表达式 我这里为保留两位小数
replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')

开头不能为0，且不能输入小数

<input type="text" onkeyup="value=value.replace(/[ \d]/g,'').replace(/ 0{1,}/g,'')" >

只能输入汉字：

    <el-input maxlength="10" class="input" style="margin-left: 680px" 
              placeholder="资产名称" v-model.trim="inputName"
              onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"
              @blur="inputName = $event.target.value"
    ></el-input>

终极方法

onkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )"

onkeypress 事件会在键盘按键被按下并释放一个键时发生。

提示：与 onkeypress 事件的关联的事件执行顺序:

onkeydown
onkeypress
onkeyup

注意： 在所有浏览器中 onkeypress 事件只能监听字母和数字，不能监听一些特殊按键（ALT、CTRL、SHIFT、ESC、箭头等）。监听一个用户是否按下按键请使用 onkeydown 事件,所有浏览器都支持 onkeydown 事件。

既考虑了手动输入的，也考虑了粘贴

<input onKeyUp="value=value.replace(/[^\d]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" />

我们经常在表单的文本框中做一些验证处理，大家一般都是是限制那些具体要求的输入，而没有考虑到个别用户出于种种原因将文字粘贴到表单的文本域中，这样还是避免不了那些特殊的输入。

onbeforepaste顾名思义：在用户执行粘贴工作之前，进行的js操作。

附加：js剪切板应用clipboardData（window的子对象）对象：提供了对剪贴板的访问。
三个方法
1.ClearData(sDataFormat) 删除剪贴板中指定格式的数据。
2.GetData(sDataFormat) 从剪贴板获取指定格式的数据。
3.SetData(sDataFormat, sData) 给剪贴板赋予指定格式的数据，返回 true 表示操作成功。

附input标签事件

一、在Html中input标签的相关事件写法：

1、onfocus（常用）

input标签获取焦点事件

2、onblur（常用）

input失去焦点事件（触发条件：先获取焦点，再失去焦点触发）

3、onchange

input失去焦点并且它的value值发生变化时触发

4、oninput

input框输入过程中value值改变时实时触发，输入每一个字符都会触发

5、onclick

input标签type="button"时的点击事件