时间戳

首页 > 解决方案 > 如何将动态输入限制为仅一位数并锁定按键，除了使用纯Javascript的旋转按钮？

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

问题描述

我创建了一个动态输入，它应该只使用微调器（箭头按钮）接受 0 到 5 之间的数字，并且应该限制来自键盘的手动输入。我已经尝试过[this][1]，但它在我的代码中不起作用。我有两个 java 脚本文件 data.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>

标签： javascript

解决方案

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

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

这可以很容易地完成。

为了防止键盘事件影响输入，只需编写一个响应“keydown”事件的侦听器函数。

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

});

推荐阅读