时间戳

首页 > 解决方案 > 如何通过按向上箭头 (Javascript) 获取最新输入

javascript - 如何通过按向上箭头 (Javascript) 获取最新输入

问题描述

我怎样才能得到我按顺序输入的最新输入。例如：我声明了一个包含 20 个元素的数组，当我输入一些内容时，我删除了数组的第一个元素，并在最后添加了我刚刚输入的输入。

因此，当我按下向上箭头按钮时，数组的最后一个元素将作为新输入出现。如果我再按一次向上箭头，我希望我的输入更改为倒数第二个元素，依此类推。

它在我的 jsfiddle 链接中不起作用。它从数组中输出另一个元素。

var singleValues;
var theInputsNumber = 19;
var latestInputs = new Array(20);
latestInputs.fill("Latest");

function clickMe(){ 
  singleValues = $( "#input" ).val();
  var c = latestInputs.shift();
  latestInputs.push(singleValues);
  $( "#output" ).append( singleValues);
  $("#input").prop('value', ''); 
}
$(document).on('keypress',function(e) {
    $('#input').bind('keydown', function(e) {
             if (e.which === 38) {
                $("#input").prop('value', latestInputs[theInputsNumber]);
                theInputsNumber--;
             }
        });
        if(e.which == 13) {
            theInputsNumber=19;
            clickMe();
            }
});
<!DOCTYPE html>
<html>
<head>
    <title>Think Fast Trivia</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="jqueryScript.js"></script>
    <link rel="stylesheet" href="styles.css">
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

        
        <div  id="output" class="item1"></div>
        <input autofocus type="text" name="input" id="input" />
        <button id="send" onclick="clickMe()">Send</button>

</body>
</html>

标签： javascripthtmljquerymemoryinput

解决方案

您错过了必须确定（逻辑测试）计数器（theInputsNumber）的值才能在堆栈的顶部（和底部）重置的想法。

我重命名theInputsNumber了计数器并提供了向上键和向下键功能。我也没有将数组大小限制为 20，因为无论如何这都不会产生影响（数组大小不受其他语言的限制）。

编辑（基于评论）：我已将所有内容放在 HTML 中，因此您可以将此内容保存到 HTML 文件中并使用浏览器打开。它可以在没有服务器的情况下正常工作。

<!DOCTYPE html>
<html>

<head>
  <title>Think Fast Trivia</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div id="output" class="item1"></div>
  <input autofocus type="text" name="input" id="input" />
  <button id="send" onclick="clickMe()">Send</button>
  
  <script>
  var counter = 0;
var latestInputs = [];

function clickMe() {
  let input = $("#input").val();
  latestInputs.push(input);
  $("#input").prop('value', '');
}
$('#input').bind('keydown', function(e) {
  if (e.which === 38) {
    $("#input").prop('value', previous());
  } else if (e.which == 40) {
    $("#input").prop('value', next());
  } else if (e.which == 13) {
    clickMe();
  }
});

function previous() {
  counter = (counter === 0) ? latestInputs.length - 1 : --counter;
  return latestInputs[counter];
}

function next() {
  counter = (counter === latestInputs.length - 1) ? 0 : ++counter ;
  return latestInputs[counter];
}
  </script>
</body>

</html>

推荐阅读