我有3套带有数量字段的产品。我需要检查用户输入的产品数量不应超过6。如果用户输入的产品数量超过6，则应该在“数量”字段以下的div中输入错误，然后将“数量”字段重置为0，然后集中到“数量”字段用户再次输入数量。
这应该在所有3套产品中发生。
如果我不够清楚，请告诉我。
<!-- first set -->
<div class="sb-table-body">
<div class="content tableContentRow noTopPad">
<div>
<span class="item_n left transparentBorder"><input type="hidden" name="oid" value="50786361">005209625</span>
<span class="description_n left transparentBorder">
<a href="$field{site_url_secure}/product/index.html?id=105404446">
<strong>LOST or STOLEN IMS iPod and Sled Kit (U.S. and Canada)</strong>
</a>
<br>
<span class="mrfNo">Mfr#: KIT-CAS-520156-S0L9D6</span>
</span>
<!--<span class="unitPrice_n left textRight adjustRightPad noPadLeft transparentBorder">$<span class="js-unitPrice">545.00</span></span>-->
<span class="qty_n left transparentBorder"><span>
<span class="js-qty-orig" id="js-qty-orig-50786361">0</span>
<input type="text" name="spn_qty_50786361" id="spn_qty_50786361" size="3" value="0" id='numberbox' maxlength="4" class="js-qty" onkeyup="checkLength(event)">
</span></span>
<div class="error-message"></div>
<!--<span class="extPrice_n left adjustRightPad noPadLeft textRight transparentBorder">$<span class="js-extPrice">0.00</span></span>-->
</div>
</div>
<!-- first set end -->
<!-- second set -->
<div class="content tableContentRow noTopPad">
<div>
<span class="item_n left transparentBorder"><input type="hidden" name="oid" value="50392334">004667652</span>
<span class="description_n left transparentBorder">
<a href="$field{site_url_secure}/product/index.html?id=104837678">
<strong>DEFECTIVE or DAMAGED IMS iPod and Sled Kit (U.S. ONLY)</strong>
</a>
<br>
<span class="mrfNo">Mfr#: KIT-CAS-345278-R3Y2J8</span>
</span>
<!--<span class="unitPrice_n left textRight adjustRightPad noPadLeft transparentBorder">$<span class="js-unitPrice">30.00</span></span>-->
<span class="qty_n left transparentBorder"><span>
<span class="js-qty-orig" id="js-qty-orig-50392334">0</span>
<input type="text" name="spn_qty_50392334" id="spn_qty_50392334" size="3" value="0" max="6" maxlength="4" class="js-qty" onkeyup="checkLength(event)">
</span></span>
<!--<span class="extPrice_n left adjustRightPad noPadLeft textRight transparentBorder">$<span class="js-extPrice">0.00</span></span>-->
</div>
</div>
<!-- second set ends -->
<!-- third set ends -->
<div class="content tableContentRow noTopPad">
<div>
<span class="item_n left transparentBorder"><input type="hidden" name="oid" value="50753139">004863908</span>
<span class="description_n left transparentBorder">
<a href="$field{site_url_secure}/product/index.html?id=105362442">
<strong>IMS Heel Cup Charger</strong>
</a>
<br>
<span class="mrfNo">Mfr#: CBL-CUP-LP5PC-BK</span>
</span>
<!--<span class="unitPrice_n left textRight adjustRightPad noPadLeft transparentBorder">$<span class="js-unitPrice">45.00</span></span>-->
<span class="qty_n left transparentBorder"><span>
<span class="js-qty-orig" id="js-qty-orig-50753139">0</span>
<input type="text" name="spn_qty_50753139" id="spn_qty_50753139" size="3" value="0" max="6" maxlength="4" class="js-qty">
</span></span>
<!--<span class="extPrice_n left adjustRightPad noPadLeft textRight transparentBorder">$<span class="js-extPrice">0.01</span></span>-->
</div>
</div>
<!-- Third set ends -->
答案 0 :(得分：1)
您可以将onkeyup事件用于此目的。
在下面的示例中，如果输入中的值的长度小于6，则import cv2
import imutils
import os
IMAGE_FOLDER='../Images/PP'
known_width=12.7 #ball known to have 12.7mm diameter
for file in os.listdir(IMAGE_FOLDER):
if file.endswith('.JPG'):
actual_distance=int(file.split(".JPG")[0])*25.4 #25.4mm/inch
src=cv2.imread(os.path.join(IMAGE_FOLDER,file),0)
src=imutils.resize(src,height=640,width=480)
blurred=cv2.GaussianBlur(src,(5,5),0)
edges=cv2.Canny(blurred,100,200)
cnts=cv2.findContours(edges.copy(),cv2.RETR_EXTERNAL,cv2.CHAIN_APPROX_SIMPLE)
cnts=imutils.grab_contours(cnts)
center=None
if len(cnts)>0:
c=max(cnts,key=cv2.contourArea)
((x,y),radius)=cv2.minEnclosingCircle(c)
M=cv2.moments(c)
center = (int(M["m10"] / M["m00"]), int(M["m01"] / M["m00"]))
if radius>10:
cv2.circle(src,(int(x),int(y)),int(radius),(0,255,255),2)
cv2.circle(src,center,5,(0,0,255),-1)
focal=(radius*actual_distance)/(known_width)
print "image: %s \nfocal point: %f"%(file,focal)
cv2.imshow(file,src)
cv2.waitKey(0)
outPath=os.path.join("../../",file)
cv2.imwrite(outPath,src)
将输出错误。此功能在释放任何键时触发。
checkLength()
答案 1 :(得分：0)
document.getElementById('some_id').addEventListener('keyup',function(){
if(parseInt(this.value,10) <= 6){
console.log('Fine');
}else{
console.log('Max value could be only 6 and not more than that!');
}
});<html>
<body>
<input type='number' id='some_id' />
</body>
</html>
您可以使用keyup事件来捕获值并相应地应用验证。
答案 2 :(得分：0)
const validateMaxLimit = input => {
const val_length = input.value.length
const max = input.getAttribute('data-max')
if (val_length > +max) {
input.classList.add("error")
} else {
input.classList.remove("error")
}
}
const bindEvents = input => input.addEventListener('keyup', ({target}) => validateMaxLimit(target))
//on load incase predefined values
document.querySelectorAll('input').forEach(input => {
bindEvents(input)
validateMaxLimit(input)
}).error {
border: 2px solid red
}<input type="text" data-max="6" value="1234567">
<input type="text" data-max="7">
<input type="text" data-max="10">
<input type="text" data-max="11" value="123456789111">
<input type="text" data-max="12">
<input type="text" data-max="13">
<input type="text" data-max="14">
<input type="text" data-max="15" value="12345678910">