Empêcher la sélection d'un élément

Version imprimable

Bonjour,
Je suis en train de me créé un petit clavier virtuel.
Mon problème viens que lorsque je clique sur une touche, un curseur de saisie apparaît. Comment empêcher ce phénomène?

Voici mon code d'essais:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <header></header>
    <main>
    </main>
    <footer></footer>
  </body>
<style>
.VirtKey{
        position:fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap:0.2em;
 
        border:0.2em;
        border-color:black;
        padding:0.2em;
           border-radius: 5px;
             background-color: rgb(207,232,220);
            border: 2px solid rgb(79,185,227);
 
 
}
.VirtKey_Touch{
        min-width:1cm;
        min-height:1cm;
            background-color: rgb(207,232,220);
    display: flex;
        align-items: center;
    justify-content: center;
    font-size:0.8cm;
}
</style>
<script type="text/javascript">
class VirtKey {
 
        constructor(){
                this.ctVirtKey=document.createElement('div')
                document.body.appendChild(this.ctVirtKey);
                this.ctVirtKey.classList.add('VirtKey','VirtKey_Touch')
                this.ctVirtKey.innerHTML= 'Touche'
        }
}
inst = new VirtKey()
</script>
</html>

En vous remerciant par avance pour le temps que vous voulez bien m'accorder.

01/02/2023, 14h40
SpaceFrog

css => cursor:none
01/02/2023, 14h53
alexis_c

Je te remercie, mais ce n'est pas ce que je cherche.
Je souhaite la disparition de la barre vertical de selection de texte.
Ta solution supprime la visualisation du curseur sourie au survol de l'élement.
01/02/2023, 14h55
SpaceFrog

Citation:

la barre vertical de selection de texte.

ça existe ça ?

Ha tu veux dire le caret ꕯ ou le pipe clignotant |

tu peux essayer sur le onkeyup de faire un blur() ...
ou changer le conteneur de input à span et emplir son innerHTML

sinon essaye en passant par .onselectstart = function() { return false; }
01/02/2023, 18h23
NoSmoking
Bonjour,

Citation:

Envoyé par alexis_c

Mon problème viens que lorsque je clique sur une touche, un curseur de saisie apparaît.

Je pense, d'après le titre, que tu parles de la sélection du texte qui peut apparaître, donc comme dit

Citation:

Envoyé par SpaceFrog

sinon essaye en passant par .onselectstart = function() { return false; }

... ou alors directement en CSS
Code:

1 2 3 .VirtKey_Touch{ user-select: none; }
02/02/2023, 08h01
alexis_c

Citation:

Envoyé par SpaceFrog

sinon essaye en passant par .onselectstart = function() { return false; }

j'ai essayé:

Code:

this.ctVirtKey.onselectstart = function() { return false; }

dans le constructeur mais ça ne marche pas.

Sinon le CSS est OK

Code:

user-select: none;

Merci pour vos réponse
02/02/2023, 08h15
SpaceFrog

Je ne connaissais pas le user-select css, comme quoi on en apprend encore tous les jours :D
Merci NoSmo ;)
02/02/2023, 11h47
NoSmoking

Citation:

Envoyé par alexis_c

j'ai essayé:

Code:

this.ctVirtKey.onselectstart = function() { return false; }

dans le constructeur mais ça ne marche pas.

Aucune raison que cela ne soit pas pris en compte !!!

je suis un peu en retard pour la réponse...

Citation:

Envoyé par NoSmoking

Aucune raison que cela ne soit pas pris en compte !!!

Mais quand j’essaye cela ne marche pas. Voici mon code d'essais:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <header></header>
    <main>
    </main>
    <footer></footer>
  </body>
<style>
.VirtKey{
        position:fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap:0.2em;
 
        border:0.2em;
        border-color:black;
        padding:0.2em;
           border-radius: 5px;
             background-color: rgb(207,232,220);
            border: 2px solid rgb(79,185,227);
/*user-select: none;*/
 
}
.VirtKey_Touch{
        min-width:1cm;
        min-height:1cm;
            background-color: rgb(207,232,220);
    display: flex;
        align-items: center;
    justify-content: center;
    font-size:0.8cm;
}
</style>
<script type="text/javascript">
class VirtKey {
 
        constructor(){
                this.ctVirtKey=document.createElement('div')
                document.body.appendChild(this.ctVirtKey);
                this.ctVirtKey.classList.add('VirtKey','VirtKey_Touch')
                this.ctVirtKey.innerHTML= 'Touche'
                this.ctVirtKey.onselectstart = function() { return false; }
        }
}
inst = new VirtKey()
</script>
</html>

09/02/2023, 10h50
NoSmoking

Citation:

Mais quand j’essaye cela ne marche pas.

Le mystère demeurera donc entier car ton code fonctionne parfaitement chez moi :calim2: