关键词：
【中文标题】如何在 Web UI 中使用 Javascript 键盘事件【英文标题】：How to use Javascript keyboard events for web UI 【发布时间】：2011-05-08 01:16:37 【问题描述】：我对使用 JS 事件感兴趣，例如右/左箭头、空格键等。 想知道什么是正确的方法。我想在此类用户交互中滑动照片、显示 DIV 等。
我想到了使用 jQuery 的可能实现，例如 http://api.jquery.com/event.which/ 虽然我不确定这是最好的方法。
以下是此类 UI 实现的两个很好的示例 （他们是怎么做到的呢？） http://www.thesixtyone.com ;http://www.pictorymag.com/showcases/summer-jobless
我更像是一个 C# 人，正在寻找正确的方向。
【问题讨论】：
【参考方案1】：如果您已经在使用或计划使用 jQuery，那么利用 which 并不是一个坏主意。如果您查看示例，它会向您展示如何执行此操作。将光标放在那里的文本字段中，然后按您感兴趣的键，即左箭头。 keydown: 中显示的数字是您要查找的代码。
现在，当您编写自己的函数时，您可以将keydown 绑定到document 并监听正确的键。从那里，您可以根据按下的键调度某些行为。
$(document).bind('keydown', function (e)
var code = e.which;
switch (code)
case 39:
// code to execute when right arrow is pressed
some_right_arrow_action();
break;
case 37:
// code to execute when left arrow is pressed
some_left_arrow_action();
break;
return;
);
您询问了 Pictorymag.com 等网站如何处理此功能。这是 Pictorymag.com 所做的（我已经解压缩了他们的代码以使其更易于阅读）：
$(document).keydown(function (e)
switch(e.keyCode)
case 39:
case 74:
node = s[++curr];
if(node)
$.scrollTo(node,800);
else
curr = s.length-1;
break;
case 37:
case 75:
node = s[--curr];
if (node)
$.scrollTo(node, 800);
else
curr=0;
break;
);
【讨论】：
这正是我认为可以用 jQuery 实现的方式，如他们的示例所示。在我作为实现示例提供的两个站点中，我没有发现任何相似之处，因此我认为可能有不同的、更合适的方法。知道他们是怎么做的吗？谢谢！ PictoryMag.com 基本上使用了我发布的内容：$(document).keydown(function(e)switch(e.keyCode)case 39:case 74:node=s[++curr];if(node)$.scrollTo(node,800); elsecurr=s.length-1; break;case 37:case 75:node=s[--curr];if(node)$.scrollTo(node,800); elsecurr=0; break;);
TheSixtyOne.com 对他们的代码进行了一些混淆，并且他们使用面向对象的方法，所以我不能在这里发布任何简洁的内容，但如果你想尝试工作，代码就在这里出来：thesixtyone.com/site_media/javascripts/thesixtyone.v16041.js
太好了，谢谢。我会那样做。您在 PictoryMag.com 代码中的何处找到它？有没有办法从混淆的 TheSixtyOne 代码中阅读\理解一些东西？
PictoryMag.com 的代码在这里：static.mypictory.com/static/CACHE/js/ecb5cdac854f.js我如何在空手道 UI 中使用 javascript 执行器
】我如何在空手道UI中使用javascript执行器【英文标题】：HowdoiusejavascriptexecutorinKarateUI【发布时间】：2021-12-2315:01:12【问题描述】：首先，空手道UI自动化是非常棒的工具。在使用空手道编写UI测试时，我有点享受它。我遇到了一... 查看详情
如何使用 stomp.js 在 javascript 中使用 Web 套接字消息？
】如何使用stomp.js在javascript中使用Web套接字消息？【英文标题】：Howtoconsumewebsocketmessagesinjavascriptusingstomp.js?【发布时间】：2016-06-3013:12:04【问题描述】：我需要使用stomp.js库在Javascript中使用Web套接字消息。我有这个代码结构........ 查看详情
ios - 如何在 Web 视图中使用 javascript 打开 swift 视图？
】ios-如何在Web视图中使用javascript打开swift视图？【英文标题】：ios-howtoopenaswiftviewusingjavascriptinawebview?【发布时间】：2017-03-1818:46:44【问题描述】：在我的应用程序中，我有一个webview，我想要一个按钮，可以在Swift中打开另一个... 查看详情
如何使用 JavaScript 在 UI 自动化中访问 actionSheet（及其按钮）？
】如何使用JavaScript在UI自动化中访问actionSheet（及其按钮）？【英文标题】：HowtoaccessactionSheet(andit\'sbuttons)inUIAutomationwithJavaScript?【发布时间】：2014-01-2411:32:39【问题描述】：我有一个非常简单的应用程序，其中包括一个TableViewCo... 查看详情
如何配置使用 System.Web.UI
】如何配置使用System.Web.UI【英文标题】：HowdoIconfiguretouseSystem.Web.UI【发布时间】：2012-09-1508:29:49【问题描述】：我希望使用类似于MartinHN在以下帖子中提出的代码来创建HTML格式的SMTP邮件项目：SOPOST在创建对正确程序集的引用时... 查看详情
如何在 Web 浏览器和 XCode 中使用 JavaScript 运行 HTML 文件？
】如何在Web浏览器和XCode中使用JavaScript运行HTML文件？【英文标题】：HowtoRuntheHTMLfilewithJavaScriptinWebBrowserandXCode?【发布时间】：2012-09-0509:32:40【问题描述】：我想使用phonegapCordova2.0创建iPhone应用程序。现在iwroteJavascriptexternalandHTMLc... 查看详情
如何在 web3.js 中正确使用还原原因在 UI 中显示有意义的错误消息
】如何在web3.js中正确使用还原原因在UI中显示有意义的错误消息【英文标题】：Howtoproperlyuserevertreasoninweb3.jstoshowmeaningfulerrormessageinUI【发布时间】：2021-06-2621:19:26【问题描述】：我想使用web3.js向用户显示还原原因，例如在用户... 查看详情
如何在 Web 表单中使用 javascript 隐藏复选框和复选框文本
】如何在Web表单中使用javascript隐藏复选框和复选框文本【英文标题】：howtohidecheckboxandcheckboxtextusingjavascriptinwebforms【发布时间】：2021-08-0809:09:24【问题描述】：我正在处理网络表单并编写一段javascript来隐藏复选框及其文本，但... 查看详情
BIgQuery UDF Javascript 可在 Web UI 中使用，但不能嵌入
】BIgQueryUDFJavascript可在WebUI中使用，但不能嵌入【英文标题】：BIgQueryUDFJavascriptworksinWebUIbutnotembedded【发布时间】：2017-02-1606:14:50【问题描述】：我设法得到一个使用WebUI和UDF的查询。当我将它移植到我的嵌入式代码时，我得到一... 查看详情
使用 JavaScript 在 AngularJS Bootstrap UI 中调用模式窗口
】使用JavaScript在AngularJSBootstrapUI中调用模式窗口【英文标题】：InvokingmodalwindowinAngularJSBootstrapUIusingJavaScript【发布时间】：2013-04-2208:43:32【问题描述】：使用提到的示例here，如何使用JavaScript调用模态窗口而不是单击按钮？我是An... 查看详情
如何调试在 iPad 上的 web 视图中运行的 Javascript？
】如何调试在iPad上的web视图中运行的Javascript？【英文标题】：HowtodebugJavascriptrunninginawebviewonaniPad?【发布时间】：2011-03-1706:06:09【问题描述】：我有一台iPad在web视图中运行一些Javascript，但有时它只是拒绝工作。有没有人有办法... 查看详情
如何在复杂的 Web 应用程序中构建 Javascript 程序？
】如何在复杂的Web应用程序中构建Javascript程序？【英文标题】：HowtostructureJavascriptprogramsincomplexwebapplications?【发布时间】：2011-01-2508:35:55【问题描述】：我有一个不容易描述的问题。我正在编写一个强烈使用jQuery和AJAX调用的Web... 查看详情
如何在 ClearML Web UI 中管理数据集？
】如何在ClearMLWebUI中管理数据集？【英文标题】：HowtomanagedatasetsinClearMLWebUI?【发布时间】：2021-06-1221:19:03【问题描述】：使用带有clearml-dataCLI的自行部署ClearML服务器，我想在WebUI中管理（或查看）我的数据集，如ClearML网页(https:... 查看详情
如何在 HTML 中制作 Animated Web Speech API UI
】如何在HTML中制作AnimatedWebSpeechAPIUI【英文标题】：HowtomakeAnimatedWebSpeechAPIUIinHTML【发布时间】：2022-01-1617:44:18【问题描述】：我必须创建一个动画，例如Google.comDekstop麦克风表演（即根据声音的响度缩放麦克风边框）。我使用了W... 查看详情
如何在 PHP Scriptable Web Browser 中调用 javascript 函数
】如何在PHPScriptableWebBrowser中调用javascript函数【英文标题】：HowtocalljavascriptfunctioninPHPScriptableWebBrowser【发布时间】：2013-10-2410:07:15【问题描述】：我正在使用PHPScriptableWebBrowser从一个网站下载一些数据。我们必须在表单中为字段... 查看详情
如何在使用 AngularJS/Web API/Angular-ui-router 的指令中调用 $http.put 服务后更新页面
】如何在使用AngularJS/WebAPI/Angular-ui-router的指令中调用$http.put服务后更新页面【英文标题】：HowToUpdatePageAfterCalling$http.putserviceinDirectiveUsingAngularJS/WebAPI/Angular-ui-router【发布时间】：2017-09-1420:02:39【问题描述】：我们是AngularJS的新... 查看详情
如何让 Web 浏览器下载存储在 JavaScript 字符串中的文件？
】如何让Web浏览器下载存储在JavaScript字符串中的文件？【英文标题】：HowtogetawebbrowsertodownloadafilethatisstoredinaJavaScriptString?【发布时间】：2013-05-0306:39:06【问题描述】：我已经能够编写JavaScript以使浏览器使用如下代码从远程服务... 查看详情
如何在 iOS 的目标 C 中使用 javascript 代码？
】如何在iOS的目标C中使用javascript代码？【英文标题】：HowtousejavascriptcodeinobjectiveCiniOS?【发布时间】：2017-07-2107:59:03【问题描述】：我有一个web视图，加载时我必须在其中打开在线聊天。我有一个用于在线聊天的javascript代码。... 查看详情