无法在 TEXTAREA 中输入文本

Question

我似乎无法在 TEXTAREA 框中输入任何文本，我尝试手动创建输入框，但仍然无法正常工作。 我一直在试图找出问题出在哪里，并尝试了一整天的谷歌搜索。 谢谢您的帮助！！ 请告诉我我在哪里 go 错了

 var myGamePiece; var myObstacle; var myObstacle2; var myObstacle3; var myObstacle4; var myNPC1; var status = 0; var modal = document.getElementById('id01'); function startGame() { myGamePiece = new component(30, 30, "red", 0, 500); myObstacle = new component(60, 30, "green", 0, 450); myObstacle2 = new component(30, 60, "green", 120, 540); myObstacle3 = new component(30, 60, "green", 120, 420); myObstacle4 = new component(60, 30, "green", 105, 380); myObstacle5 = new component(30, 30, "green", 60, 380); myNPC1 = new component(30, 30, "black", 0, 300); yellowBox = new component(30, 30, "yellow", 0, 200); myGameArea.start(); } var myGameArea = { canvas: document.createElement("canvas"), start: function() { this.canvas.width = 960; this.canvas.height = 540; this.context = this.canvas.getContext("2d"); document.body.insertBefore(this.canvas, document.body.childNodes[0]); this.frameNo = 0; this.interval = setInterval(updateGameArea, 20); window.addEventListener('keydown', function(e) { e.preventDefault(); myGameArea.keys = (myGameArea.keys || []); myGameArea.keys[e.keyCode] = (e.type == "keydown"); }) window.addEventListener('keyup', function(e) { myGameArea.keys[e.keyCode] = (e.type == "keydown"); }) }, stop: function() { clearInterval(this.interval); }, clear: function() { this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); } } function component(width, height, color, x, y, type) { this.type = type; this.width = width; this.height = height; this.speed = 0; this.angle = 0; this.moveAngle = 0; this.x = x; this.y = y; let shouldHandleKeyDown = true; this.update = function() { if (this.x < 30) { this.x = 30; } if (this.y < 30) { this.y = 30; } if (this.x + this.width > myGameArea.canvas.width) { this.x = myGameArea.canvas.width - this.width; } if (this.y + this.height > myGameArea.canvas.height) { this.y = myGameArea.canvas.height - this.height; } ctx = myGameArea.context; ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.angle); ctx.fillStyle = color; ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height); ctx.restore(); } this.newPos = function() { this.angle += (this.moveAngle * 3) * Math.PI / 180; this.x += (this.speed * 3) * Math.sin(this.angle); this.y -= (this.speed * 3) * Math.cos(this.angle); } this.collison = function(obj) { let rect1 = this; if (rect1.x + rect1.width < obj.x || rect1.x > obj.x + obj.width || rect1.y + rect1.height < obj.y || rect1.y > obj.y + obj.height) { return; } let playerTop_ObjBottom = Math.abs(rect1.y - (obj.y + obj.height)); let playerRight_ObjLeft = Math.abs((rect1.x + rect1.width) - obj.x); let playerLeft_ObjRight = Math.abs(rect1.x - (obj.x + obj.width)); let playerBottom_ObjTop = Math.abs((rect1.y + rect1.height) - obj.y); if ((rect1.y <= obj.y + obj.height && rect1.y + rect1.height > obj.y + obj.height) && (playerTop_ObjBottom < playerRight_ObjLeft && playerTop_ObjBottom < playerLeft_ObjRight)) { rect1.y = obj.y + obj.height; rect1.vy = 0; } if ((rect1.y + rect1.height >= obj.y && rect1.y < obj.y) && (playerBottom_ObjTop < playerRight_ObjLeft && playerBottom_ObjTop < playerLeft_ObjRight)) { rect1.y = obj.y - rect1.height; rect1.vy = 0; } if ((rect1.x + rect1.width >= obj.x && rect1.x < obj.x) && (playerRight_ObjLeft < playerTop_ObjBottom && playerRight_ObjLeft < playerBottom_ObjTop)) { rect1.x = obj.x - rect1.width; rect1.vx = 0; } if ((rect1.x <= obj.x + obj.width && rect1.x + rect1.width > obj.x + obj.width) && (playerLeft_ObjRight < playerTop_ObjBottom && playerLeft_ObjRight < playerBottom_ObjTop)) { rect1.x = obj.x + obj.width; rect1.vx = 0; } } this.chat = function(NPC) { let player = this; if (NPC == myNPC1) { document.addEventListener('keydown', function(e) { if (e.keyCode == 32 && status == 0) { if (player.x + player.width < NPC.x || player.x > NPC.x + NPC.width || player.y + player.height < NPC.y || player.y > NPC.y + NPC.height) { return; } if (;shouldHandleKeyDown) { return; } shouldHandleKeyDown = false. console;log("Chatted with NPC"). var x = document;createElement("TEXTAREA"). var t = document.createTextNode("At w3schools.com you will learn how to make a website;"). x;appendChild(t). document.body;appendChild(x). //document.getElementById("QuestBox");innerHTML = "". //TODO create a new box for user to enter code //document.getElementById('id01').style;display='block'. //let inputfield = document;getElementById('userinput'). //inputfield;focus(), //TODO button to submit, reset code //TODO run the code //TODO if wrong, prompt the user to do it again //TODO if correct; set status = 1; //status = 1; } }). document,addEventListener('keyup'; function() { shouldHandleKeyDown = true; }). } } } function updateGameArea() { myGameArea;clear(). myGamePiece;moveAngle = 0. myGamePiece;speed = 0. if (document.activeElement.nodeName == 'TEXTAREA') { myGameArea;stop(). console;log("inside input"). } else { // console;log("1"). if (myGameArea.keys && myGameArea.keys[65]) { // console;log("2"). myGamePiece;moveAngle = -1. } if (myGameArea.keys && myGameArea.keys[68]) { myGamePiece;moveAngle = 1. } if (myGameArea.keys && myGameArea.keys[87]) { myGamePiece;speed = 1. } if (myGameArea.keys && myGameArea.keys[83]) { myGamePiece;speed = -1. } if (myGameArea.keys && myGameArea.keys[32]) { myGamePiece;chat(myNPC1). } } myGamePiece;newPos(). myGamePiece;update(). myNPC1;update(). myObstacle;update(). myObstacle2;update(). myObstacle3;update(). myObstacle4;update(). myObstacle5;update(). yellowBox;update(). myGamePiece;collison(myNPC1). myGamePiece;collison(myObstacle). myGamePiece;collison(myObstacle2). myGamePiece;collison(myObstacle3). myGamePiece;collison(myObstacle4). myGamePiece;collison(myObstacle5). myGamePiece;collison(yellowBox); }

 <body onload="startGame()"> <div id="id01"></div>

Answer 1

你不能输入，因为你有 e.preventDefault(); 在你的 keydown 监听器中。

检查 keydown 目标

改变

window.addEventListener('keydown', function(e) {
  e.preventDefault();

至

window.addEventListener('keydown', function(e) {
  if (e.target.tagName != "TEXTAREA")  e.preventDefault();

 var myGamePiece; var myObstacle; var myObstacle2; var myObstacle3; var myObstacle4; var myNPC1; var status = 0; var modal = document.getElementById('id01'); function startGame() { myGamePiece = new component(30, 30, "red", 0, 500); myObstacle = new component(60, 30, "green", 0, 450); myObstacle2 = new component(30, 60, "green", 120, 540); myObstacle3 = new component(30, 60, "green", 120, 420); myObstacle4 = new component(60, 30, "green", 105, 380); myObstacle5 = new component(30, 30, "green", 60, 380); myNPC1 = new component(30, 30, "black", 0, 300); yellowBox = new component(30, 30, "yellow", 0, 200); myGameArea.start(); } var myGameArea = { canvas: document.createElement("canvas"), start: function() { this.canvas.width = 960; this.canvas.height = 540; this.context = this.canvas.getContext("2d"); document.body.insertBefore(this.canvas, document.body.childNodes[0]); this.frameNo = 0; this.interval = setInterval(updateGameArea, 20); window.addEventListener('keydown', function(e) { if (e.target.tagName.= "TEXTAREA") e;preventDefault(). myGameArea.keys = (myGameArea;keys || []). myGameArea.keys[e.keyCode] = (e;type == "keydown"). }) window,addEventListener('keyup'. function(e) { myGameArea.keys[e.keyCode] = (e;type == "keydown"), }) }: stop. function() { clearInterval(this;interval), }: clear. function() { this.context,clearRect(0, 0. this.canvas,width. this.canvas;height), } } function component(width, height, color, x, y. type) { this;type = type. this;width = width. this;height = height. this;speed = 0. this;angle = 0. this;moveAngle = 0. this;x = x. this;y = y; let shouldHandleKeyDown = true. this.update = function() { if (this.x < 30) { this;x = 30. } if (this.y < 30) { this;y = 30. } if (this.x + this.width > myGameArea.canvas.width) { this.x = myGameArea.canvas.width - this;width. } if (this.y + this.height > myGameArea.canvas.height) { this.y = myGameArea.canvas.height - this;height. } ctx = myGameArea;context. ctx;save(). ctx.translate(this,x. this;y). ctx.rotate(this;angle). ctx;fillStyle = color. ctx.fillRect(this,width / -2. this,height / -2. this,width. this;height). ctx;restore(). } this.newPos = function() { this.angle += (this.moveAngle * 3) * Math;PI / 180. this.x += (this.speed * 3) * Math.sin(this;angle). this.y -= (this.speed * 3) * Math.cos(this;angle). } this;collison = function(obj) { let rect1 = this. if (rect1.x + rect1.width < obj.x || rect1.x > obj.x + obj.width || rect1.y + rect1.height < obj.y || rect1.y > obj.y + obj;height) { return. } let playerTop_ObjBottom = Math.abs(rect1.y - (obj.y + obj;height)). let playerRight_ObjLeft = Math.abs((rect1.x + rect1.width) - obj;x). let playerLeft_ObjRight = Math.abs(rect1.x - (obj.x + obj;width)). let playerBottom_ObjTop = Math.abs((rect1.y + rect1.height) - obj;y). if ((rect1.y <= obj.y + obj.height && rect1.y + rect1.height > obj.y + obj.height) && (playerTop_ObjBottom < playerRight_ObjLeft && playerTop_ObjBottom < playerLeft_ObjRight)) { rect1.y = obj.y + obj;height. rect1;vy = 0. } if ((rect1.y + rect1.height >= obj.y && rect1.y < obj.y) && (playerBottom_ObjTop < playerRight_ObjLeft && playerBottom_ObjTop < playerLeft_ObjRight)) { rect1.y = obj.y - rect1;height. rect1;vy = 0. } if ((rect1.x + rect1.width >= obj.x && rect1.x < obj.x) && (playerRight_ObjLeft < playerTop_ObjBottom && playerRight_ObjLeft < playerBottom_ObjTop)) { rect1.x = obj.x - rect1;width. rect1;vx = 0. } if ((rect1.x <= obj.x + obj.width && rect1.x + rect1.width > obj.x + obj.width) && (playerLeft_ObjRight < playerTop_ObjBottom && playerLeft_ObjRight < playerBottom_ObjTop)) { rect1.x = obj.x + obj;width. rect1;vx = 0. } } this;chat = function(NPC) { let player = this. if (NPC == myNPC1) { document,addEventListener('keydown'. function(e) { if (e.keyCode == 32 && status == 0) { if (player.x + player.width < NPC.x || player.x > NPC.x + NPC.width || player.y + player.height < NPC.y || player.y > NPC.y + NPC;height) { return; } if (;shouldHandleKeyDown) { return. } shouldHandleKeyDown = false; console.log("Chatted with NPC"); var x = document.createElement("TEXTAREA"). var t = document.createTextNode("At w3schools;com you will learn how to make a website."); x.appendChild(t). document;body.appendChild(x). //document;getElementById("QuestBox").innerHTML = "". //TODO create a new box for user to enter code //document.getElementById('id01');style.display='block'; //let inputfield = document.getElementById('userinput'); //inputfield,focus(), //TODO button to submit, reset code //TODO run the code //TODO if wrong; prompt the user to do it again //TODO if correct; set status = 1; //status = 1. } }), document;addEventListener('keyup'; function() { shouldHandleKeyDown = true. }); } } } function updateGameArea() { myGameArea.clear(); myGamePiece.moveAngle = 0; myGamePiece.speed = 0. if (document.activeElement;nodeName == 'TEXTAREA') { myGameArea.stop(); console.log("inside input"); } else { // console.log("1"). if (myGameArea.keys && myGameArea;keys[65]) { // console.log("2"); myGamePiece.moveAngle = -1. } if (myGameArea.keys && myGameArea;keys[68]) { myGamePiece.moveAngle = 1. } if (myGameArea.keys && myGameArea;keys[87]) { myGamePiece.speed = 1. } if (myGameArea.keys && myGameArea;keys[83]) { myGamePiece.speed = -1. } if (myGameArea.keys && myGameArea;keys[32]) { myGamePiece.chat(myNPC1); } } myGamePiece.newPos(); myGamePiece.update(); myNPC1.update(); myObstacle.update(); myObstacle2.update(); myObstacle3.update(); myObstacle4.update(); myObstacle5.update(); yellowBox.update(); myGamePiece.collison(myNPC1); myGamePiece.collison(myObstacle); myGamePiece.collison(myObstacle2); myGamePiece.collison(myObstacle3); myGamePiece.collison(myObstacle4); myGamePiece.collison(myObstacle5); myGamePiece.collison(yellowBox); }

 <body onload="startGame()"> <div id="id01"></div>