草庐IT

Javascript 拦截 "Ctrl+O"不打开我的文件对话框

coder 2023-08-06 原文

我有一个 <input type="file" id="browse-button"/>我的 HTML 中的文件浏览器输入。

我有另一个 ID 为 choose-file-button 的按钮单击时调用 document.getElementById("browse-button").click(); .单击此按钮时，它会正确单击 #browse-button文件对话框打开。

现在，我从 this answer 中获取代码拦截 Ctrl+O按键并打开我的文件对话框，所以我有这个:

$(window).bind('keydown', function(e)
{
    if (e.ctrlKey || e.metaKey)
    {
        switch (String.fromCharCode(e.which).toLowerCase())
        {
            case 's':
                e.preventDefault();
                // doesn't matter for this question
                return false;
            case 'o':
                e.preventDefault();
                document.getElementById("choose-file-button").click();
                return false;
        }
    }
    return true;
});

如你所见，当我拦截 Ctrl+O我点击我的 #choose-file-button按钮，调用 document.getElementById("browse-button");在其 onclick处理程序。我在这个点击处理程序中放置了一个断点，当我按下 Ctrl+O 时它确实到达了这个断点。但是，文件对话框从未出现。

通过调试，我发现如果我把一个alert(...);在#choose-file-button click()之后行，然后显示警告 和 显示正常页面“打开文件”对话框(不是我的文件对话框)。但是，如果我没有此警报，则什么也不会显示。

这是一个错误吗？如何修复它并通过截获的 Ctrl+O 显示我的文件对话框？

编辑:我刚刚在 Chrome 中进行了测试，它运行良好。但是，它在 Firefox 中仍然不起作用。

最佳答案

这里有一些浏览器安全魔法。当使用超时或间隔或我尝试的任何其他方法时，代码正常运行但浏览器只是拒绝打开文件上传对话框。这可能是故意的，以阻止恶意 JS 在未经同意的情况下尝试获取用户的文件。但是，如果您绑定(bind)到链接上的点击事件，则它可以使用 jQuery 或常规 JS 完美运行。

编辑:正如所怀疑的那样，大多数浏览器都会根据事件的类型以及它是由用户创建还是以编程方式生成来跟踪事件是否可信。 Selenium this answer了解全部详情。如您所见，由于键盘事件不在列表中，因此永远无法信任它们。

Test JSFiddle 

<form action="#" method="post">
    <div>
        <input type="file" id="myfile" name="myfile" /> <a href="#" id="mylink" accesskey="o">Click me</a>
    </div>
</form>

$("#mylink").click(function () {
    $("#myfile").click();
});

$(window).bind('keydown', function (e) {
    if (e.ctrlKey || e.metaKey) {
        switch (String.fromCharCode(e.which).toLowerCase()) {
            case 'o':
                e.preventDefault();
                console.log("1a");

                $("#myfile").click();
                //alert("hello");

                console.log("1b");
                return false;
        }
    }
    return true;
});

我认为这里只有两种选择，它们都是变通方法，而不是解决方案。

  • 一种是使用链接来触发文件上传对话框，并要求人们使用 ALT+SHIFT+O 而不是 CTRL+O(因为我在示例中的链接中添加了一个 accesskey attribute)。
  • 另一种选择是为 drag-drop file uploading 使用一个新的 HTML5 JavaScript API。 .

附录:我还尝试在 Firefox 中使用纯 JavaScript 来获取点击事件并使用 isTrusted 属性检查它是否可信。对于链接的点击，它返回 true。但是，尝试在别处存储和重用该事件是行不通的，因为在您获得对它的引用时它已经被分派(dispatch)了。此外，不出所料，创建新事件并尝试设置 isTrusted = true 也不起作用，因为它是只读的。

关于Javascript 拦截 "Ctrl+O"不打开我的文件对话框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31032610/

ampJavascriptcode34sectionjqueryhtmldialog

有关Javascript 拦截 "Ctrl+O"不打开我的文件对话框的更多相关文章

  1. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  2. ruby - 其他文件中的 Rake 任务 - 2

    我试图在一个项目中使用rake，如果我把所有东西都放到Rakefile中，它会很大并且很难读取/找到东西，所以我试着将每个命名空间放在lib/rake中它自己的文件中，我添加了这个到我的rake文件的顶部:Dir['#{File.dirname(__FILE__)}/lib/rake/*.rake'].map{|f|requiref}它加载文件没问题，但没有任务。我现在只有一个.rake文件作为测试，名为“servers.rake”，它看起来像这样:namespace:serverdotask:testdoputs"test"endend所以当我运行rakeserver:testid时

  3. ruby-on-rails - 在 Rails 中将文件大小字符串转换为等效千字节 - 2

    我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，

  4. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

  5. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  6. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题

  7. ruby - 将差异补丁应用于字符串/文件 - 2

    对于具有离线功能的智能手机应用程序，我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl

  8. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  9. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  10. ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2

    为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar

随机推荐