how to avoid an ugly cursor appearing?

[Piet Souris]

hi All,

working on an assignment for my javascript course, creating a game. I chose 'wordle', or 'muisle' as I've called it. I created my layout with flex and grid, The keys on the keyboard and the squares where the letters appear are all divs with suitables css-settings. What spoils the whole lot for me is that when I click a key or a letter squarem a nasty cursor appears (a vertical line). You can see it in the 'Enter' key.

I've searched the internet, but found nothing that works. Is there a way to avoid that ugly cursor appearing, something like in Java: setFocusable(false)?

[Bear Bibeault]

It seem like you are using a text input for the Enter key display? I can think of no other reason that a text cursor would appear.

[Piet Souris]

This is the code that I use to create the keys:

function maakToetsenbord() {
    const rijen = [
        ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
        ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '<- Bs'],
        ['Z', 'X', 'C', 'V', 'B', 'N', 'M', 'Enter']
    ];
    const rowContainer = ['rij1', 'rij2', 'rij3'];
    const keyboard = document.getElementById('toetsenbord');
    for (let i = 0; i < 3; i++) {
        const row = document.getElementById(rowContainer[i]);
        for (const toets of rijen[i]) row.appendChild(maakToets(toets));
    }
    keyboard.addEventListener('click', verwerkKlik);
}

function maakToets(text) {
    const element = document.createElement('div');
    element.setAttribute('class', 'toets');
    if (text === 'Enter') element.setAttribute('id', 'enter');
    if (text === '<- Bs') element.setAttribute('id', 'bs');
    element.innerHTML = text;
    return element;
}

function verwerkKlik(event) {
    console.log(event.target.innerText);
}

and this is the css:

.toets {
    padding: 4px;
    font-family: Arial;
    font-size: 28px;
    font-weight: bold;
    border: 1px solid black;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    text-align: center;
    background-color: lightblue;
    margin: 5px;
    cursor: pointer;
}

[Tim Holloway]

Text cursors have a purpose.m They indicate that a given text input control has the focus. They indicate where the next character will be inserted. And they stretch to highlight multi-character text selections to visually indicate what text has been selected for replacement, deletion or copy/paste.

It's therefore really not a good idea to suppress them in most cases.

Now if you are actually sensitising a graphical box to keystrokes, I wouldn't expect a cursor to display, but if you are using an HTML TEXT control to back it up, there's not a whole lot I can suggest. Even if you didn't have a cursor, I'd hope that you'd alter the input box color or something as a visual cue. You can't just use the mouse pointer, since the focus point moves with the pointer and most of us move the pointer out of the way when typing, since otherwise it overlays (and thus obscures) the text.

[Bear Bibeault]

Hmmm, looks like you are just creating a div with text -- I would not expect that to exhibit a text cursor. Any chance you could post up a working example at CodePen or similar?

[Piet Souris]

Thanks, Bear. I'll try that, but I do not know CodePen, so it will take me some time.

Well, the thing is that in the many exercises I made so far, I never noticed this behavior. And on my tablet if I press a key for more than a fraction, up pops this Google-frame with the letter of the key reported. As if I was selecting some text.

[Piet Souris]

That looks like a fine piece of software, that CodePen! I got it working within 10 minutes. Here is the link:

to my CodePen example

As you can see, clicking in the header or in the left loremipsum, a cursor appears, and you can even select text. The other 2 I changed to 'button', and that behaves just like I want. So, instead of a div  I will use buttons.

Then the last issue: the spaces where the letters should appear to form the words, are also divs, so that a click inside also shows that dreaded cursor. Setting the type of these squares to 'button' would be strange, since they are not buttons. Gonna try some other types.

[Bear Bibeault]

OK, tried this in multiple browsers and no cursor. What browser are you using?

Being able to select text is normal.

[Piet Souris]

Using Chrome on Windows 10.

[Stephan van Hulst]

As Bear points out, the web would be a very frustrating place if you couldn't select any text in a web page. Along with the ability to select text comes the affordance of cluing the user in that they can select text, by changing the cursor.

Now, I don't know why explicitly changing the cursor to pointer doesn't work for you, but as an alternative you could try making the text unselectable by setting user-select to none. However, I'm not a big fan of overriding the default behavior of the browser, especially not when it limits the user in what they can do.

To me, the best approach is to better express your intent by using semantic HTML. Instead of using <div> to create a button, use <button>. In most cases this will by default display a button that looks similar to native buttons in desktop apps, but remember that they are just HTML elements so you can style them however you want using CSS.

[Tim Holloway]

Yes, here's a good point. On a web page, you can select even static text as a general rule.

[Piet Souris]

Didn't know about user-select. I put all the letter-fields into a div with user-select: none, and likewise for my keyboard. That completely solved my issue. The other parts of the page act as usual.

Thanks, guys!