jQuery 终端 + 引导程序答案

【问题标题】：jQuery terminal + bootstrapjQuery 终端 + 引导程序
【发布时间】：2014-12-20 17:59:00
【问题描述】：

我在页面上使用带有引导程序的 jQuery 终端 (http://terminal.jcubic.pl/)。

我试图让终端进入模态，我让模态的东西工作，然后按两个按钮打开模态..

但是每当我加载页面时，我必须先单击正文上的某个位置，然后才能按下它们，否则什么都不会发生，我什至对我的点击都没有反应。

我做错了什么？

终端：

$('#terminal').terminal(function(command, term) {
    if (command == 'help') {
        term.echo("available commands are system, test ");
    } 
});

我的模态：

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Terminal</h4>
      </div>
      <div class="modal-body">
        <div id="terminal"></div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

这是我创建的 bootply 似乎有问题，我不确定您的问题是什么，但这看起来根本不像终端。（js中的代码是teminal.min.js）bootply.com/i1e57WCF5C
我不知道我的错误是什么，但它就像终端上的一些焦点或其他东西..
我在此页面上传了一个演示：fiddlebox.net84.net - 要打开终端，您需要按 ctrl+shift，但正如您所见，您必须先单击正文中的某个位置，然后才能单击按键
可能是因为焦点在浏览器的地址栏上……你面临一个长期的问题……你必须想办法在加载后将焦点设置在页面上。如果我在这方面找到什么东西，我会告诉你的。
更新：你的问题是 'ctrl' 键... shift 被捕获

标签： javascript jquery twitter-bootstrap jquery-terminal

【解决方案1】：

显然，当页面加载时，如果没有事先明确设置焦点，就无法从页面中捕获Ctrl 键。

您可以以编程方式设置焦点，但您无法获得“Ctrl”键...据我查找，这是在页面加载之前您无法使用的唯一键页面。

您应该考虑更改按键组合，或强制用户点击页面，例如通过他必须确认的消息。

除此之外，您的代码正在运行。我看到的唯一缺陷是您关闭了两次</body>。

【讨论】：

当我删除终端、命令并使用 ctrl 和 shift 单击时发出警报，它工作得很好，我不需要单击任何地方。我上传了一个没有终端的demo fiddlebox.net84.net/test.html
@Tommy，如果您仔细阅读jquery.terminal-min.js 中的代码，您会发现有很多案例场景涉及 ctrlKey 和 shiftKey。在文档可以完全绑定键盘之前发生的事情。你可以解决这个问题，但你会遇到一些严重的黑客攻击，这可能会导致功能减少。我设法让它工作，但这涉及到注释可能 100 行代码，并且在点击页面之前必须编写更多代码以使其在工作后恢复正常......不推荐，抱歉 :(
废话！我和那个制作终端的人谈过，他说我需要检查模式是否打开，然后启用终端，否则我必须禁用它！无论如何感谢您的帮助！

【解决方案2】：

这是旧的，但仅供参考，在这个问题Bootstrap modal show event 的答案中说，当引导模式显示时如何添加事件（你使用显示的事件）。所以你可以使用这个：

$(document).ready(function() {
    var term = $('#terminal').terminal(function(command, term) {
        if (command == 'help') {
            term.echo("available commands are system, test ");
        } 
    }, {enabled: false});

    $('#myModal').on('shown', function() {
        term.enable();
    })
});

【讨论】：