vue 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"
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>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에서 정수만 입력할 수 있는 조작은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
