当前位置：文江博客话题详情

JavaScript 聚焦于元素/标签并使用光标键移动

发布于 2025-01-08 16:34:27 字数 164 浏览 0 评论 0原文

我创建了一个日历应用程序，一个全页日历，但问题是我希望每当日历页面加载时自动聚焦/选择今天的日期，并且我可以使用箭头键在日期之间移动。例如，如果我使用左箭头键，前一个日期将获得焦点/选择等。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

挽手叙旧 2025-01-15 16:34:27

为每个 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>;
}

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

Assign an id to each div. For example

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

and some 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");
    }
  });

});

and some css

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

This solution does not account for clicking left arrow when it is the first of the month or right arrow when it is the last of the month, but the idea is there.

回复收藏 0 原文

~没有更多了~