JavaScript“keydown”工作不正确

我现在正在构建一个类似的项目，并且使用隐藏的输入元素，例如<input id="hidden_input" style="opacity:0;width:0;height:0;">在添加其他内容之前，我们需要使元素始终聚焦：var hidden_input_element = document.getElementById("hidden_input");//Focushidden_input_element.focus();//When unfocused, focus againhidden_input_element.addEventListener("blur", hidden_input_element.focus);然后在该元素上有一个“输入”侦听器，该侦听器将在输入元素更新时调用（使用文本，而不是使用 CTRL 键等时）hidden_input_element.addEventListener("input", updateMirror);updateMirror 函数将更新可见的元素，例如在您的例子中 ID 为“text”的元素。function updateMirror(){document.getElementById("text").innerText = hidden_input_element.value;}稍后我们需要处理一些事件hidden_input_element.addEventListener("keydown", function(e){//When user presses enter, empty the input and send it to a handler.if(e.keyCode == 13){//Send input to handlerhandleInput(hidden_input_element.value);//Empty inputhidden_input_element.value = "";}//If the input would be changed, it might be helpful to update the mirrorupdateMirror();});然后创建该处理函数（handleInput）：function handleInput(input){//Create a list of commands that the user can use.}我希望这能起作用，这是一个片段：var hidden_input_element = document.getElementById("hidden_input");//Focushidden_input_element.focus();//When unfocused, focus againhidden_input_element.addEventListener("blur", hidden_input_element.focus);hidden_input_element.addEventListener("input", updateMirror);function updateMirror(){document.getElementById("text").innerText = hidden_input_element.value;}hidden_input_element.addEventListener("keydown", function(e){//When user presses enter, empty the input and send it to a handler.if(e.keyCode == 13){//Send input to handlerhandleInput(hidden_input_element.value);//Empty inputhidden_input_element.value = "";}//If the input would be changed, it might be helpful to update the mirrorupdateMirror();});//This print function is to print a text in the logfunction print(value){//Create a text elementvar new_line_element = document.createElement("p");//Make the text look fancynew_line_element.classList.add("line");//Set the text on the elementnew_line_element.innerText=value;//Append the element in the log divdocument.getElementById("log").appendChild(new_line_element);}function handleInput(input){//This will happen when the user presses enter.print(input);}body {background-color: #222;}.line {color: #0f0;font-family: 'Courier New', Courier, monospace;width: 300px;height: 10px;/*I set the width and height from 1000px to 1px, and removed padding 25px*//*Also, I recommend adding these:*/white-space: pre-wrap;word-break: break-all;}/*This is specified for the input, and not the log messages.This is to add a cursor to see where you are.*/.input::after{content:".";color: transparent;border-bottom: 2px solid #0f0;position: relative;top: -4px;animation: cursorblink;animation-duration: .5s;animation-iteration-count: infinite;}@keyframes cursorblink{50%{opacity:0;}}#hidden_input{position: absolute;left: 0px;top: 0px;}<!DOCTYPE html"><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="style.css"><title></title></head><body><div id="log"></div><p id="text" class="line input"></p><input id="hidden_input" style="opacity:0;width:0;height:0;"><script src="script.js"></script></body></html>

JavaScript“keydown”工作不正确

2回答