Hide helper text box from xterm js

Question

I am using the xterm js to create a terminal application. When I add it to my Angular app, it shows the basic terminal but also a textbox with "W" on top of it.

ngOnInit() {
    let term = new Terminal();
    let fitAddon = new FitAddon();
    term.loadAddon(fitAddon);
    let element = document.getElementById('terminal');
    if (element) {
      term.open(element);
      fitAddon.fit();
      term.write('Hello from \x1B[1;3;31mvXterm\x1B[0m $ ');
      term.onKey((key) => {
        console.log(key);
        if (key.domEvent.code === 'Enter') {
          term.writeln('');
          term.write('Hello from \x1B[1;3;31xTerm\x1B[0m $ ');
        } else {
          term.write(key.key);
        }
      });
    }
  }

and terminal.component.html file:

<div class="terminal" id="terminal"></div>

When I click on the terminal, the cursor appears on the textbox and it is DOM element from the library. Does anyone know how to remove or hide it?

Is it always a "W"? Or are you pressing the "W" key? Can you please provide the HTML as well? Only the part where the `terminal` element is. — A1rPun, Nov 16 '19 at 01:59
copy of this one - https://stackoverflow.com/questions/60180685/xterm-js-how-to-hide-xterm-helper-textarea — Ujjwal Kumar Gupta, Apr 12 '20 at 11:33

score 1 · Accepted Answer · answered Nov 16 '19 at 02:33

1

It turns out the issue is from my testing environment. not the library. Closing the question

answered Nov 16 '19 at 02:33

781850685

320
2
15

And you could just use a css selector to highlight that helper class and add display: none property that way it isn’t showing in your development environment. Or you could use javascript to remove it completely when the page loads. $(“.className”).removeNode. Keep in mind that is pseudo code for the selector and may not be the correct syntax – Brandon Roberts Nov 16 '19 at 03:21

Hide helper text box from xterm js

1 Answers1

Linked