我正在展示一堆图片,每张图片都有自己的 HTML 页面。我有一个输入按钮,单击该按钮会将您带到图片的下一个链接。但是,我希望能够使用我的键盘箭头前进和后退。我是编码新手,不知道这是否可行。我可以使用 accesskey 对 HTML 执行此操作吗:
<input type="button" accesskey="?" value="Next Item">
或者我需要使用 JQuery 插件吗?如果有,是哪一个?
最佳答案
作为zzzzBov说明,HTML accesskey 定义了一个键,只有当它与 ALT 键组合时才会被捕获。这就是为什么它对单独捕获任何 key 没有用。
但是你必须特别小心地选择捕获光标键的事件,因为Webkit has decided not to trap them with the keypress event as it is not in the standard .目前这里的其他 3 个答案使用此 keypress 事件,这就是为什么它们在 Google Chrome 或 Safari 中不起作用,但如果您将其更改为 keydown 它们将适用于所有浏览器。
您可以使用此 jQuery 代码来捕获 left、right、up 的 keydown 事件,和 向下 箭头键:
$(window).keydown(function(e) {
switch (e.keyCode) {
case 37: // left arrow key
case 38: // up arrow key
e.preventDefault(); // avoid browser scrolling due to pressed key
// TODO: go to previous image
return;
case 39: // right arrow key
case 40: // up arrow key
e.preventDefault();
// TODO: go to next image
return;
}
});
在以下代码片段中,您可以看到并运行一个完整的示例,其中使用按键或按钮交换图像。
var currentImage = 0;
var imagesArray = [
'https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/150px-Tux.svg.png',
'https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Wikipedia-logo-v2.svg/150px-Wikipedia-logo-v2.svg.png',
'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Git-logo.svg/150px-Git-logo.svg.png'
];
function hasPrev() {
return currentImage > 0;
}
function hasNext() {
return currentImage < imagesArray.length - 1;
}
function goToPrev(e) {
e.preventDefault();
if (!hasPrev())
return;
currentImage -= 1;
updateScreen();
}
function goToNext(e) {
e.preventDefault();
if (!hasNext())
return;
currentImage += 1;
updateScreen();
}
function updateScreen() {
$('#imgMain').attr('src', imagesArray[currentImage]);
$('#btnPrev').prop('disabled', !hasPrev());
$('#btnNext').prop('disabled', !hasNext());
}
$(document).ready(function() {
updateScreen();
$('#btnPrev').click(goToPrev);
$('#btnNext').click(goToNext);
});
var keyCodes = {
left: 37,
up: 38,
right: 39,
down: 40
};
$(window).keydown(function(e) {
switch (e.keyCode) {
case keyCodes.left:
case keyCodes.up:
goToPrev(e);
return;
case keyCodes.right:
case keyCodes.down:
goToNext(e);
return;
}
});button:enabled kbd {
color: green;
font-weight: bold;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnPrev">
Previous Image
<br/>
<small>(arrow keys: <kbd>left</kbd> or <kbd>up</kbd>)</small>
</button>
<button id="btnNext">
Next Image
<br/>
<small>(arrow keys: <kbd>right</kbd> or <kbd>down</kbd>)</small>
</button>
<br/>
<img id="imgMain" src="">
keyCode 最近已被弃用(但我还没有找到跨浏览器的解决方案)。引用 MDN article for keyCode :
Deprecated
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.
...
这不应该被新的网络应用程序使用。 IE 和 Firefox 已经(部分)支持 KeyboardEvent.key。此外,Google Chrome 和 Safari 支持 KeyboardEvent.keyIdentifier,它在 DOM 级别 3 事件的旧草案中定义。如果可以使用它们或其中之一,则应尽可能使用它们/它。
关于jquery - 如何为输入按钮创建键盘快捷键,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5061353/
出于纯粹的兴趣,我很好奇如何按顺序创建PI,而不是在过程结果之后生成数字,而是让数字在过程本身生成时显示。如果是这种情况,那么数字可以自行产生,我可以对以前看到的数字实现垃圾收集,从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法,类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits
关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点?我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等),但我确实想创建一个输出文件。
使用带有Rails插件的vim,您可以创建一个迁移文件,然后一次性打开该文件吗?textmate也可以这样吗? 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件,这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails,您可以创建一个新的迁移文件并一次性打开它吗?,我们在StackOverflow上找到一个类似的问题: https://sta
我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject),但我没有脚本/生成,只有脚本/rails,当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗?没有这个命令可以创建插件吗?PS:我正在使用Rails3.2.1和ruby1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布,插件生成器已经被移除。查看变更日志here.现在
我刚刚为fedora安装了emacs。我想用emacs编写ruby。为ruby提供代码提示、代码完成类型功能所需的工具、扩展是什么? 最佳答案 ruby-mode已经包含在Emacs23之后的版本中。不过,它也可以通过ELPA获得。您可能感兴趣的其他一些事情是集成RVM、feature-mode(Cucumber)、rspec-mode、ruby-electric、inf-ruby、rinari(用于Rails)等。这是我当前用于Ruby开发的Emacs配置:https://github.com/citizen428/emacs
如何使用RSpec::Core::RakeTask初始化RSpecRake任务?require'rspec/core/rake_task'RSpec::Core::RakeTask.newdo|t|#whatdoIputinhere?endInitialize函数记录在http://rubydoc.info/github/rspec/rspec-core/RSpec/Core/RakeTask#initialize-instance_method没有很好的记录;它只是说:-(RakeTask)initialize(*args,&task_block)AnewinstanceofRake
关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗?通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串?SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复?
我正在尝试在Ruby中制作一个cli应用程序,它接受一个给定的数组,然后将其显示为一个列表,我可以使用箭头键浏览它。我觉得我已经在Ruby中看到一个库已经这样做了,但我记不起它的名字了。我正在尝试对soundcloud2000中的代码进行逆向工程做类似的事情,但他的代码与SoundcloudAPI的使用紧密耦合。我知道cursesgem,我正在考虑更抽象的东西。广告有没有人见过可以做到这一点的库或一些概念证明的Ruby代码可以做到这一点? 最佳答案 我不知道这是否是您正在寻找的,但也许您可以使用我的想法。由于我没有关于您要完成的工作
我正在阅读SandiMetz的POODR,并且遇到了一个我不太了解的编码原则。这是代码:classBicycleattr_reader:size,:chain,:tire_sizedefinitialize(args={})@size=args[:size]||1@chain=args[:chain]||2@tire_size=args[:tire_size]||3post_initialize(args)endendclassMountainBike此代码将为其各自的属性输出1,2,3,4,5。我不明白的是查找方法。当一辆山地自行车被实例化时,因为它没有自己的initialize方法
rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过?我有一个调用Controller方法的JqueryPOSTajax调用,但我没有在其中放置任何真实性代码,但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送