Javascript 在django表单中使用按键代替按钮

我有一个网站，可以输入文本、对条目进行投票以及投票条目的实时表格：

这是用django编码的。我设法在一页纸上得到了一条文字记录和一份投票表格

文本输入： 按下enter键时，文本条目会向数据库（sqlite3）添加一个新条目。一些javascript将输入绑定到按键以发送到views.py，它使用GET添加文本和当前日期时间。未使用任何表单，该位置已在js中重新加载

投票表格 投票形式是POST方法，您有两个提交按钮来向上或向下投票显示的文本。显示的文本通过html中的“for循环”访问。刷新页面时，它将从views.py更新为最新的未引导文本

在views.py中的投票功能中，将发送向上或向下按钮的名称以及正在投票的条目的id。投票从条目的分数中加减，保存并刷新页面

物理安装 我的下一步是构建一个使用web架构的物理安装。最终安装不会在一个页面上，因此将有一个投票站和一个入口站。我将使用街机按钮，使进入和投票按

街机按钮>操纵杆编码器>Joy2Key映射器 我将arcade按钮连接到ZeroDelay操纵杆编码器上，并让Joy2Key运行，按钮映射到13（回车）38（向上箭头）和40（向下箭头）

所有操作都与文本输入（操纵杆按钮映射到输入按钮13）配合良好

我遇到的问题是如何获取使用django表单的密钥。 由于投票使用表单，django希望在按钮区域中单击鼠标。我正试着回避这个问题。我得到的最接近的方法是在投票表单中放置一个多余的文本输入框来捕获关键活动

当该框处于活动状态时，我可以按下映射到向上箭头的按钮，并在命令提示符中看到一些POST反馈（但它尚未发送投票）。如果我单击文本输入框，我可以按下映射到enter按钮的按钮，并在命令提示中获得反馈并成功输入文本

所以我的问题是。。。。。如果没有大量的外部库或花哨的Gamepad API编码，是否有一种简洁的方法可以让django表单按钮仅通过键盘按键工作？如果需要一个活动框，是否可以将其隐藏并全屏显示？（我已经试过了，但运气不好）

好的，我就是这么做的

在一个新的voting.html中，我使用以下代码捕获操纵杆映射到的箭头按钮：

<div id="Vote" class = "high">
  <div style="text-align: center">
  {% for entry in voting_entry_list %} 
    <li><a href="/entries/{{ entry.id }}/">{{ entry.text }}&nbsp{{ entry.score }}</a></li>
    <p>
    <input type="submit" id="voteid" name='voteid' value="{{ entry.id }}" autofocus value="" onfocus="this.value = this.value;" class = "transparent"/>
          <script>
            $(document).ready(function() {
              $("#voteid").bind("keydown", function(e) { //input type=id above
                if (e.keyCode == 38) {
                  var text = $("#voteid").val();        
                  var args = {'voteid':text};       
                  $.get("/voteup/", args).done(function(data) {
                    console.log("message: " + data);
                    location.reload();  
                  });
                return false;
                }
                if (e.keyCode == 40) {
                  var text = $("#voteid").val();        
                  var args = {'voteid':text};       
                  $.get("/votedown/", args).done(function(data) {
                    console.log("message: " + data);
                    location.reload();  
                  });
                return false;
                }       
              });
            });     
          </script>
  {% endfor %}
  </div>
</div>

这似乎避免了表单和按键的任何问题。由于它位于单独的投票页面上，透明的虚拟提交按钮使该选择在刷新时处于活动状态，而不是它们位于同一页面时的文本输入框。我可以访问voting_entry_列表中已排序的条目，并使用单独的js脚本和views.py请求为每个按钮向上或向下投票

我的目标是用基本的django和js实现这一点，但我对安装大量库或编写额外的gamepad.api状态和轮询没有信心，所以工作完成了

这在目前看来是一个难题，但似乎是可靠的。将来，我可能会尝试使用按键开关来简化它，如果这是一个安全问题，也许会尝试使用POST而不是GET

def voting(request):   
context = {
  'latest_entry_list': Entry.objects.order_by('-pub_date')[:10], # simple sorting by datetime, latest first, 10 items
  'high_entry_list': Entry.objects.order_by('-score','-pub_date')[:10], # simple sorting by score high to low, 10 items
  'high_entry': Entry.objects.order_by('-score','-pub_date')[:1], # simple sorting by score high to low, 10 items
  'low_entry_list': Entry.objects.order_by('score','-pub_date')[:10], # simple sorting by score low to high, 10 items
  'voting_entry_list': Entry.objects.unvoted_or_random(), # actually one item, command from extended object manager
}
return render(request, 'entries/voting.html', context); # returns when vote is accessed

def voteup(request):
voting_id = request.GET.get('voteid') # voting id number is brought in as var
if request.method=='GET': #always polling, when get votes, save and redirect to /index to refresh
    v = Entry.objects.get(pk=voting_id) # get by voting id var
    v.score +=1 # add one to score for voteup button
    v.voted=True # set voted boolean to true
    v.save() # explicit save, as is not saved with change above
else:
    pass
return HttpResponse('done') # Only on console 

def votedown(request):
voting_id = request.GET.get('voteid') # voting id number is brought in as var
if request.method=='GET': #always polling, when get votes, save and redirect to /index to refresh
    v = Entry.objects.get(pk=voting_id) # get by voting id var
    v.score -=1 # add one to score for voteup button
    v.voted=True # set voted boolean to true
    v.save() # explicit save, as is not saved with change above
else:
    pass
return HttpResponse('done') # Only on console