vue input는 정수만 입력할 수 있는 동작을 제한합니다

일부 항목에서 input 상자는 숫자만 입력할 수 있으며 다음과 같은 방법을 사용할 수 있습니다.
먼저 탭에 @input 이벤트를 연결하여 탭의 값 변화를 감청하고 정규를 통해 입력한 값을 변경합니다.

 <input
  class="keep_input"
  v-number-only
  style="width:35px"
  v-model="scope.row.fileOrder"
  @input="scope.row.fileOrder = Number($event.target.value.replace(/\D+/, ''))"
 />

두 번째 봉투는 사용자 정의 지령을 라벨에 놓으세요!

 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)
   }
  }
 },

다음은 페이지에 가서 효과를 볼 수 있습니다. 숫자만 입력하고 정수만 입력할 수 있습니다!
요소의 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;
 }

보충 지식: 기록el-input type=number 제한 길이el-input 사용
다음과 같습니다.

<el-input type="number"
 oninput="if(value.length>10)value=value.slice(0,10)"
 @keyup.enter.native="query()"
 onKeypress="return(/[\d\.]/.test(String.fromCharCode(event.keyCode)))"
 :max="99999999">
 </el-input>

oninput는 사용자 정의 이벤트가 이벤트에서 입력한 숫자의 길이를 가져와서 규정된 길이보다 크면 잘라내기를 판단합니다.
keyup.enter.native는 Enter 키를 눌렀을 때query () 이벤트를 트리거하는 키보드 리턴 이벤트입니다.
max는 입력 상자의 최대 값입니다. 만약 input의 type=number가 입력 상자에 문자를 입력할 수 없습니다.
number 상자는 e를 입력하는 문제를 해결합니다
주요 원인은 e가 수학적으로 대표하는 것은 무리수이고 무한히 순환하지 않는 소수이다. 그 값은 약 2.7182818284이기 때문에 e를 입력할 때 입력 상자는 e를 하나의 숫자로 간주한다.
다음 방법으로 이 버그를 피하고 input 탭에 다음과 같은 속성을 추가할 수 있습니다.
onKeypress=“return(/[\d.]/.test(String.fromCharCode(event.keyCode)))”

show-password에 이 속성 입력 문자를 추가하여 숨깁니다. 일반적으로 암호 상자에 사용됩니다.
질문 기록!
상기 vue제한input에서 정수만 입력할 수 있는 조작은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.