jQuery terminal + bootstrap

Question

I'm using a jQuery terminal (http://terminal.jcubic.pl/) with bootstrap on my page.

I'm trying to get the terminal to be inside a modal, I got the modal thing to work and I press two buttons to open up the modal..

But whenever I load the page I have to click somewhere on the body before I can press them otherwise nothing happens i doesn't even react on my clicks.

What am I doing wrong?

Terminal:

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

My modal:

<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>

here's a bootply that i created that seems to be having issues, i'm not exactly sure what your issue is, but this doesn't look like terminal at all. (the code in the js is the teminal.min.js) http://www.bootply.com/i1e57WCF5C — DLeh, Oct 24 '14 at 20:38
I dont know what my error is, but it is like some focus or something on the terminal.. — Tommy, Oct 24 '14 at 20:40
I uploaded a demo at this page: http://fiddlebox.net84.net/ - To open the terminal you need to press ctrl+shift, but as you can see you must click somewhere in the body before you can click the keys — Tommy, Oct 24 '14 at 20:49
Probably because the focus is on the address bar of the browser... You are facing a long term issue... You have to find a way to set the focus on the page after load. I'll let you know if I find something on this. — Ruby Racer, Oct 24 '14 at 21:11
Update: Your problem is the 'ctrl' key... shift gets captured — Ruby Racer, Oct 24 '14 at 21:30
I got some new tips that i must disable the terminal until the modal is shown, now i just need to know how to look this up and activate the terminal when it is shown — Tommy, Oct 25 '14 at 19:47

score 0 · Answer 1 · answered Oct 24 '14 at 21:52

0

Apparently, when a page loads, there is no way to capture the Ctrl key from within the page without previous explicitly setting the focus on it.

You can set focus programatically, but you can't get the 'Ctrl' key... As far as I've looked up, this is the only key you can't use when the page loads, before acting on the page.

You should either consider changing your combination of keys, or forcing the user to click on the page, by, for example, a message he has to acknowledge.

Other than that, your code is working. The only flaw I see is that you close </body> twice.

answered Oct 24 '14 at 21:52

Ruby Racer

5,690
1
26
43

When i remove the terminal, command and just uses an alert on the click with ctrl and shift, it works perfectly and i dont need to click anywhere. I uploaded a demo without the terminal http://fiddlebox.net84.net/test.html – Tommy Oct 25 '14 at 09:20
@Tommy, if you read through the code in `jquery.terminal-min.js` you'll see that there are a lot of case scenarios which involve ctrlKey and shiftKey. Things happen there before document can fully bind the keyboard. You can get through this, but you are up to some serious hacking and this will probably end up in reduced functionality. I managed to get it to work, but that involved commenting maybe 100 lines of code, and will have to write more code to make it return to normal after it has worked before clicking on the page... not recommended, sorry :( – Ruby Racer Oct 25 '14 at 21:30
Crap! I talked to that one who made the terminal, and he said i need to check if the modal is open and then enable the terminal otherwise i must make it disabled! Thanks for your help anyways! – Tommy Oct 26 '14 at 13:22

score 0 · Answer 2 · edited May 23 '17 at 11:54

This is old but for reference, in this question Bootstrap modal show event the answer say, how to add event when bootstrap modal is show (you use shown event). so you can use this:

$(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();
    })
});

jQuery terminal + bootstrap

2 Answers2