如何将动态输入限制为仅一位数字并锁定按键,除了使用纯 Javascript 的旋转按钮?



我创建了一个动态输入,它应该只使用微调器(箭头按钮(接受 0 到 5 之间的数字,并且应该限制来自键盘的手动输入。我已经尝试过[this][1]但它在我的代码中不起作用。我有两个java脚本文件数据.js包含要读取的对象,其他文件包含一个读取对象并动态显示它们的函数请帮助我知道我在哪里做错了?谢谢

//data.js
var catalogArray = [
{
code: 100,
name: "T Shirt c100",
desc: "Lorem ipsum, or lipsum as it is sometimes known as",
price: 150,
image: "./images/img100.jpg"
},
{
code:101 ,
name: "T Shirt c101",
desc: "Lorem ipsum, or lipsum as it is sometimes known as",
price: 250,
image: "./images/img101.jpg"
}
];
//function.js
function chargerArticles() {
	var articles = document.getElementById("content");
	var catalog=catalogArray;
	for (var i =0; i < catalog.length; i++) {
		//Command Input Area
		var zoneCmd=document.createElement("div");
		zoneCmd.setAttribute("class", "border");
		
		var inputCmd=document.createElement("Input");
		inputCmd.setAttribute("class", "qty");
		
		//inputcmd all properties
		inputCmd.type="number";
		// inputcmd.maxLenght="1";
		// inputcmd.onKeydown=false;
		inputCmd.value=0;
		inputCmd.min=0;
		inputCmd.max=5;
		zoneCmd.appendChild(inputCmd); //child 1
		//zoneCmd child of article element
		article.appendChild(zoneCmd);
		//finally article as a child of articles 
		articles.appendChild(article);
	}
	
	
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<script src="js/data.js"></script>
<script src="js/codeboutique.js"></script>
</head>
<body onload="chargerArticles()">
<!-- 	<div class="border"><input class="qty" id="0-qte" type="number" min="0" max="5"
"><button class="cartBtn hvr-underline-btn" id="0-cmd" 
"> ADD TO CART</button></div> -->
	<div class="mainDivClass">
<section id="content">
</section>
</div>
</body>
</html>

目前还不清楚">旋转按钮"是什么类型的东西,所以我无法解决你问题的这一部分。

但您的另一个要求是不响应键盘的输入。

这很容易完成。

为了防止键盘事件影响输入,只需编写一个响应"键下"事件的侦听器函数。

let input = document.createElement('input');
document.body.appendChild(input);
input.addEventListener('keydown', e => {
// console.log('keydown e.key:', e.key);
// prevent default input response
e.preventDefault();
// take action on up or down arrow key
if (e.key === "ArrowUp") {
input.value = 'Up Arrow';
} else if (e.key === 'ArrowDown') {
input.value = 'Down Arrow';
} else {
console.log('key blocked: ', e.key);
}
});

最新更新