Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to change JQuery terminal cursor when it is not in focus?

Ive been trying to see how I can change the cursor of jquery terminal when the page is not in focus. By default, it seems that when you click off the page making it unfocused, the cursor will dissappear. How can I make it so that it can just turn into an "empty box" like in most terminals? I took a look at the documentation found here: Documentation and I think I have to use the onBlur and onFocus functions to change it but im not sure how to use it.

Would some css similar to this help me achive it?:

.cmd:not(:focus) {
/* change the css of the cursor */
}

I tried taking a look at a few online articles about changing a css element when its not in focus, but I havent been able to find something that does what im asking. Im also not exactly sure how to change the Jquery terminal’s cursor specs like width, height, rotation, etc.

Example of cursor I want when not in focus:
Pic

Tags:

2

Answers


  1. 0

    You can use :focus-within pseudo-class:

    /* Style for cursor when terminal is focused */
.cmd:focus-within .cmd-cursor {
  background-color: blue;
}

/* Style for cursor when terminal is not focused */
.cmd:not(:focus-within) .cmd-cursor {
  background-color: green;
}

    With these selectors, you can customize the cursor using any CSS properties you want, such as width, height, background-color and so on.

    Login or Signup to reply.
  2. 0

    @Invulner is correct here is a working example:

    $('body').terminal();
    .cmd:not(:focus-within) .cmd-cursor {
    outline: 1px solid var(--color, #ccc);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.terminal/js/jquery.terminal.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/jquery.terminal/css/jquery.terminal.min.css" rel="stylesheet"/>

    NOTE: I wanted to edit his answer, but it felt weird.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search