javascript - 使用按键代替 django 表单中的按钮

Question

我有一个网站，允许文本输入、对条目进行投票以及已投票条目的实时表格: http://www.highscore.a2hosted.com/index/

这是用 django 编写的。我设法在一页上获得文本输入和投票表。

文本输入: 当按下回车键时，文本条目会向数据库(sqlite3)添加一个新条目。一些 javascript 将输入绑定(bind)到按键以发送到views.py，它使用 GET 添加文本和当前日期时间。没有使用任何表单，并且位置在 js 中重新加载。

投票表格 投票形式是POST方法，您有两个提交按钮来对显示的文本进行投票赞成或反对。显示的文本是通过 html 中的“for 循环”访问的。当页面刷新时，它会从views.py 更新为最新的未投票文本。

在views.py的投票函数中，会发送向上或向下按钮的名称以及正在投票的条目的ID。投票会增加或减少条目的分数，保存并刷新页面。

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

街机按钮 > 操纵杆编码器 > Joy2Key 映射器 我将街机按钮连接到 ZeroDelay 操纵杆编码器，并让 Joy2Key 运行，按钮映射到 13(输入)、38(向上箭头)和 40(向下箭头)。

一切都与文本输入配合良好(操纵杆按钮映射到输入按钮 13)。

我遇到问题的地方是尝试获取使用 django 表单的 key 。 由于投票使用表单，django 期望在按钮区域单击鼠标。我正在努力解决这个问题。我得到的最接近的是在投票表单中放置一个多余的文本输入框来捕获关键事件。

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

所以我的问题是......没有加载外部库或花哨的游戏 handle API 编码，是否有一种简洁的方法可以让 django 表单按钮仅通过键盘按下来工作？如果需要的话是一个事件框，可以隐藏并全屏吗？ (我已经尝试过了，但还没有成功)

Answer 1

好的，这就是我所做的。

在新的 vote.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>

然后在views.py中，我使用GET而不是POST来捕获赞成票或反对票:

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

这似乎可以避免表单和按键方面的任何问题。由于它位于单独的投票页面上，因此透明的虚拟提交按钮使该选择在刷新时处于事件状态，而不是在同一页面上时的文本输入框。我可以从 Voting_entry_list 访问排序后的条目，并使用单独的 js 脚本和views.py 请求为每个按钮投票赞成或反对。

我的目标是使用基本的 django 和 js 来完成此操作，对安装大量库或编码额外的 gamepad.api 状态和轮询没有信心，所以工作完成了!

目前，这只是一个拼凑的作品，但看起来很可靠。将来，我可能会尝试使用按键开关来简化它，如果这是一个安全问题，也许会尝试使用 POST 而不是 GET。