JavaScript将焦点放在元素/标记上，并使用光标键四处移动

JavaScript get focus on element/tag and move around with cursor key

本文关键字：光标 移动 四处 焦点 元素 JavaScript      更新时间：2023-09-26

我已经创建了一个日历应用程序，一个全页日历，但问题是，每当日历页面加载时，我都希望自动以日期为中心/选择日期，并且我可以使用箭头键在日期之间移动。例如，如果我使用左箭头键，上一个日期会被聚焦/选择等。

请给我任何可能的JavaScript或jQuery解决方案。我用div来分隔日历的每一项。

为每个div分配一个id。例如

<div class="calendar" id="day1"></div>
<div class="calendar" id="day2"></div>

和一些javascript

var date = new date();  //GET DATE INFORMATION
var day = date.getDate(); //EXTRACT DAY OF MONTH
$(document).ready(function(){
  $('#day'+day).css("outline-style","solid"); //ADD FOCUS TO CURRENT DAY
  $('body').keyup(function(e){
    if (e.keycode == 37){  //IF LEFT ARROW
      $(".calendar").css("outline-style","none");
      day = day - 1;  
      $('#day'+day).css("outline-style","solid");
    }
    if (e.keycode == 39){  //IF RIGHT ARROW
      $(".calendar").css("outline-style","none");
      day = day + 1;
      $('#day'+day).css("outline-style","solid");
    }
  });
});

和一些css

.calendar{
outline-style:none;
outline-width:1px;
outline-color:<YOUR CHOICE>;
}

这个解决方案不考虑在一个月的第一个时单击左箭头，或者在一个月中的最后一个时单击右箭头，但这个想法是存在的。

相关文章：