如何通过快捷键（如Ctrl+Q）在JavaScript中清除Travelport终端

问题 #

正在开发通过API调用运行Travelport终端的GDS命令系统，当前输入clear命令可清除终端内容，但希望实现通过Ctrl+Q（或其他Ctrl组合键）的快捷键方式完成终端清除操作。相关JavaScript代码如下：

Command.GDS = {    
  getFsCallback: function(input, output, response_result) {
  setTimeout( function() {
    window.scrollTo( {
        top: 300000,
        behavior: "smooth"
      });
    }, 1000 );
    var gds_provider = $('#gds_provider').val();
    var gds_output = build_api_call(gds_provider, input.join(" "));
    $('#overlay').fadeOut();
    if (input == 'clear') {
        return output.clear();
    }    
    if(gds_output == 'Enter Password <br><br>'){
      $("#cmdline").attr("type","Password");
    }else{
      $("#cmdline").attr("type","text");
    }    
    this.clear = function() {
       outputElement.innerHTML = '';
       return this;
     };
 };

    return output.write(gds_output);
    return function() { 
      // Add Dir
      Terminal.Filesystem.pwd.getDirectory(input[1], {create: true}, function() {}, Terminal.FilesystemErrorHandler);
    };
  }
};

this.clear = function() {
   outputElement.innerHTML = '';
   return this;
 };
};

解决方案 #

1. 添加全局键盘事件监听 #

在页面初始化阶段添加键盘事件监听，捕获Ctrl+Q组合键触发清屏，同时阻止浏览器默认行为（比如Ctrl+Q关闭标签页）：

document.addEventListener('keydown', function(e) {
  // 匹配Ctrl+Q组合键
  if (e.ctrlKey && e.key.toLowerCase() === 'q') {
    e.preventDefault();
    
    // 执行清屏操作
    const outputElement = document.getElementById('终端输出元素ID'); // 替换为实际的输出DOM元素ID
    if (outputElement) {
      outputElement.innerHTML = '';
      // 同步现有逻辑：滚动到底部
      window.scrollTo({
        top: 300000,
        behavior: "smooth"
      });
    }
  }
});

2. 修正clear方法的作用域问题 #

你当前代码中clear方法定义在getFsCallback内部，作用域受限，建议将其提升到Command.GDS对象层级，确保全局可访问：

Command.GDS = {    
  // 全局可访问的clear方法
  clear: function(outputElement) {
    outputElement.innerHTML = '';
    return this;
  },
  getFsCallback: function(input, output, response_result) {
    setTimeout( function() {
      window.scrollTo( {
          top: 300000,
          behavior: "smooth"
        });
      }, 1000 );
    var gds_provider = $('#gds_provider').val();
    var gds_output = build_api_call(gds_provider, input.join(" "));
    $('#overlay').fadeOut();
    
    if (input == 'clear') {
        // 调用对象自身的clear方法
        return this.clear(outputElement);
    }    
    if(gds_output == 'Enter Password <br><br>'){
      $("#cmdline").attr("type","Password");
    }else{
      $("#cmdline").attr("type","text");
    }    

    return output.write(gds_output);
  }
};

3. 避免快捷键与输入框冲突 #

如果终端有输入框（如#cmdline），可添加判断，仅在输入框未聚焦时触发快捷键：

document.addEventListener('keydown', function(e) {
  const isInputFocused = document.activeElement.id === 'cmdline';
  if (e.ctrlKey && e.key.toLowerCase() === 'q' && !isInputFocused) {
    e.preventDefault();
    const outputElement = document.getElementById('终端输出元素ID');
    if (outputElement) {
      outputElement.innerHTML = '';
      window.scrollTo({top: 300000, behavior: "smooth"});
    }
  }
});

内容的提问来源于stack exchange，提问作者Abhinav Raj