자바스크립트로 타오바오 모조품 구매량 증감 효과 구현_javascript 스킬

최근에는 ASP.NET MVC 기술을 사용하여 로컬 O2O 도서 대여 프로젝트를 개발 중입니다. 도서 세부 정보 페이지에서 사용자가 대출 수량을 입력하여 수량의 증가, 감소 및 확인을 제어할 수 있습니다. .

1. 수량은 숫자여야 합니다

2. 증가 또는 감소 버튼을 클릭하면 자동으로 1씩 증가 또는 감소할 수 있어야 합니다

3. 사용자가 입력한 내용이 숫자가 아닌 경우에는 입력할 수 없습니다(백스페이스 키 제외)

4. 사용자가 입력한 최소값은 1입니다

5. 입력 상자가 포커스를 벗어날 때 값 범위를 확인하여 입력 상자가 범위 내의 숫자인지 확인하세요

기본적으로 위의 사항을

효과는 다음과 같습니다.

다음은 HTML 코드입니다

<div class="bookNum">
<a id="sub" href="javascript:void(0);">-</a>
<input type="text" value="1" id="bookNum">
<a id="add" href="javascript:void(0);">+</a>
<a href="javascript:void(0);" id="addCart">加入借阅台</a>
<div class="clear"></div>
</div> 

먼저 첫 번째 항목을 살펴보세요.

입력은 숫자여야 합니다

키업 이벤트 모니터링을 활용하고 숫자가 아닌 문자를 정규식으로 바꾸는 것을 생각하면 쉽습니다

$("#bookNum").keyup(function(){
var regex = /[^\d]*/g;
var numVal = $(this).val();
numVal = numVal.replace(regex,"");
numVal = parseInt(numVal)||;
numVal = numVal < &#63; : numVal;
$(this).val(numVal);
});

이렇게 하면 사용자 입력이 숫자여야 함을 확인할 수 있으며, parsInt를 사용하여 정수로 변환한 후 값이 NaN이면 값을 1로 둡니다. 그러나 우리는 다음을 찾습니다. 사용자가 내부 값을 지우고 20을 입력하려고 하면 내부 값이 항상 1로 바뀌는 현상이 발생합니다

이건 무리이고 체감도 좋지 않습니다. 숫자가 아닌 숫자를 입력하면 해당 문자가 먼저 표시되고 교체됩니다.

Dangdang, JD.com 등의 사이트를 보면 숫자가 아닌 값을 입력할 때 입력란에 전혀 움직임이 없습니다. 백스페이스 이후에는 마음대로 숫자를 입력할 수 있습니다. 조사 결과 입력을 가로채기 위해 키보드를 모니터링하는 방식을 사용한 것으로 밝혀졌다.

개선 후:

$("#bookNum").keypress(function(b) {
var keyCode = b.keyCode ? b.keyCode : b.charCode;
if (keyCode != 0 && (keyCode < 48 || keyCode > 57) && keyCode != 8 && keyCode != 37 && keyCode != 39) {
return false;
} else {
return true;
}
})

이런 방식으로 사용자가 Enter(0), 백스페이스(8), 왼쪽 및 오른쪽 화살표(37 39) 및 숫자를 취소하면 정상적으로 입력할 수 있으며 다른 모든 키는 무효화되도록 보장합니다. 이렇게 하면 입력 내용이 숫자인지 확인됩니다.

그러나 또 다른 문제가 있습니다. 사용자가 백스페이스 키를 사용하여 내용을 지운 후 사용자가 아무것도 입력하지 않으면 값이 비어 있습니다.

이는 키업 및 블러 이벤트를 사용하여 보완해야 합니다

$("#bookNum").keypress(function(b) {
var keyCode = b.keyCode ? b.keyCode : b.charCode;
if (keyCode != 0 && (keyCode < 48 || keyCode > 57) && keyCode != 8 && keyCode != 37 && keyCode != 39) {
return false;
} else {
return true;
}
}).keyup(function(e) {
var keyCode = e.keyCode ? e.keyCode : e.charCode;
console.log(keyCode);
if (keyCode != 8) {
var numVal = parseInt($("#bookNum").val()) || 0;
numVal = numVal < 1 ? 1 : numVal;
$("#bookNum").val(numVal);
}
}).blur(function() {
var numVal = parseInt($("#bookNum").val()) || 0;
numVal = numVal < 1 ? 1 : numVal;
$("#bookNum").val(numVal);
}); 

이렇게 하면 사용자가 숫자를 입력할 때 확인이 이루어집니다.

버튼 컨트롤을 사용하면 훨씬 더 쉽습니다.

//增加
$("#add").click(function() {
var num = parseInt($("#bookNum").val()) || 0;
$("#bookNum").val(num + 1);
});
//减去
$("#sub").click(function() {
var num = parseInt($("#bookNum").val()) || 0;
num = num - 1;
num = num < 1 &#63; 1 : num;
$("#bookNum").val(num);
}); 

그래, 이로써 사용자 입력 문제가 완벽하게 해결되었습니다.

물론 이는 js 컨트롤에 대해서만 설명하며 최대 한도, 인벤토리 쿼리, 서버 확인 등과 같은 다른 컨트롤도 추가할 수 있습니다. 여기서는 자세히 다루지 않겠습니다.