javascript將焦點放在元素/標籤上並用光標鍵移動

我已經創建了一個日曆應用程序，一個完整的頁面日曆，但問題是我希望每當日曆頁面載入日期時自動聚焦/選擇，並且我可以使用箭頭鍵移動日期，javascript將焦點放在元素/標籤上並用光標鍵移動

例如，如果我用左箭頭鍵之前的日期得到集中/選擇等

請給我在JavaScript或jQuery的任何可能的解決方案。我用div來隔離每個日曆項，

來源

2012-02-23 Imran Hussain

[你有什麼嘗試？]（http://mattgemmell.com/2008/12/08/what-have-you-tried/）你至少可以顯示你現有的html結構的示例。 – nnnnnn 2012-02-23 05:13:37

我只是嘗試簡單的JavaScript來生成日曆，我知道重點是用來專注於輸入字段，我也想知道是否有可能專注於一些標籤，如div或表標籤？ – 2012-02-23 05:21:11

你能顯示你的代碼嗎？ – 2012-02-23 05:25:51

爲每個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>; 
}

該解決方案不考慮一下左箭頭時，它是在第一個月或右箭頭時的這是本月的最後一天，但這個想法就在那裏。

來源

2012-02-23 05:28:40 buck54321

javascript將焦點放在元素/標籤上並用光標鍵移動

回答

相關問題