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

**alexis_c** · 01/02/2023, 14h31

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**SpaceFrog** · 01/02/2023, 14h40

css => cursor:none

**alexis_c** · 01/02/2023, 14h53

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.

**SpaceFrog** · 01/02/2023, 14h55

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; }

**NoSmoking** · 01/02/2023, 18h23

Bonjour,

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

Envoyé par SpaceFrog

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

... ou alors directement en CSS

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.VirtKey_Touch{
  user-select: none;
}

**alexis_c** · 02/02/2023, 08h01

Envoyé par SpaceFrog

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

j'ai essayé:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

dans le constructeur mais ça ne marche pas.

Sinon le CSS est OK

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

user-select: none;

Merci pour vos réponse

**SpaceFrog** · 02/02/2023, 08h15

Je ne connaissais pas le user-select css, comme quoi on en apprend encore tous les jours

Merci NoSmo

**NoSmoking** · 02/02/2023, 11h47

Envoyé par alexis_c

j'ai essayé:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

dans le constructeur mais ça ne marche pas.

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

**alexis_c** · 08/02/2023, 12h48

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

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**NoSmoking** · 09/02/2023, 10h50

Mais quand j’essaye cela ne marche pas.

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

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

JavaScript

Discussions similaires

Partager

Partager