Comportement pseudo::before et curseur dans un élément[contenteditable="true"] sous IE 9

**Toufik83** · 29/03/2018, 15h29

bonjour,
j'ai une div avec un attribut contenteditable=true et le curseur apparaît après le pseudo et pas au début de la ligne (juste sous IE9).
je voudrais que le curseur soit au début de la ligne et pas après le pseudo.

aperçu :
Pièce jointe 365691

css :

Code css :

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
div[contenteditable=true] {
  width: 100%;
  padding: .4em;
  min-height: 30px;/*pour firefox*/
  border: 1px solid #00F;
  border-radius: .5em;
  text-align: left;
  font-size: 17px;
  line-height: 30px;
  word-break: break-all;
  vertical-align: middle;
  background-color: #FFF;
  word-wrap: break-word;
}
div[contenteditable=true]:empty:before {
  content: attr(placeholder);
  display: block;
  color: #D8D8D8;
}

**NoSmoking** · 29/03/2018, 16h46

Bonjour,
essai de placer ton élément before en position:absolute sans oublier de mettre ta <div> en position:relative.

**Toufik83** · 29/03/2018, 17h21

modifier la propriété position en "absolute" a résolut le problème sous IE par-contre elle a provoqué un bug d'affichage sous Firefox, la valeur de la propriété "padding" n'est pas prise en compte, et le curseur apparaît en dehors de la div.
aperçu :

Pièce jointe 365736

**Toufik83** · 29/03/2018, 18h36

j'ai trouvé cette solution https://jsfiddle.net/d8y1k7yd/12/ qui consiste d'ajouter un élément html qui joue le rôle d'un pseudo, donc le html est devenu maintenant comme suite :

Code html :

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

1
2
3
4
5
 
<div class="cont_input">
  <div contenteditable='true' class='with-ghost' placeholder='Votre texte ici...'></div>
  <div class="ghost-placeholder">Votre texte ici...</div>
</div>

puis le css :

Code :

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
 
.cont_input div[contenteditable=true]{position:relative;font-size:17px;width:100%;padding:.4em;
	background-color:white;border:1px solid blue;
	min-height:30px;/*pour firefox*/
	line-height:30px;vertical-align:middle;
	word-wrap:break-word;word-break:break-all;text-align:left;border-radius:.5em;
}
.cont_input div.with-ghost[contenteditable=true] {
        position: relative;
	background: transparent;
	z-index: 1;
}
.cont_input .ghost-placeholder{
	position: absolute;
	display: none;
	z-index: 0;
	height:30px;line-height:30px;
	vertical-align:middle;
	top: .4em; /*as padding*/
	left: .4em; /*as padding*/
	color: #bdc3c7;
}
.cont_input div[contenteditable=true]:focus { border-color: #3498db; outline: 0 }
.cont_input div[contenteditable=true]:empty+.ghost-placeholder {display: block;}

mais le problème sous Firefox persiste toujours...
aperçu :

Pièce jointe 365755

**NoSmoking** · 29/03/2018, 18h58

J'ai regardé plus avant et hormis Chrome tous les autres présentent des désagrément, tu ne peux utiliser un <input> classique stylé ?

Le meilleur compromis que j'ai trouvé je te le livre ci dessous

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">    
<style>
div.saisie,
div[placeholder] {
  position: relative;
  max-width: 100%;
  padding: .5em;
  min-height: 2em;
  border: 1px solid #00F;
  border-radius: .5em;
  font-size: 1em;
  line-height: 2em;
  word-break: break-all;
  vertical-align: middle;
  background-color: #FFF;
  word-wrap: word-break;
}
div[placeholder]:empty:after {
  content: attr(placeholder);
  display: block;
  position: absolute;
  top: 50%;
  left: .5em;
  color: #D8D8D8;
  transform: translateY(-50%);
}
div[placeholder]:empty:before {
  content: "";
}
</style>
</head>
<body>
<h2>Sans :before</h2>
<div class="saisie" contenteditable="true"></div> 
<h2>Avec :before</h2>
<div contenteditable="true" placeholder="Saisir le texte"></div> 
</body>
</html>

J'ai utilisé un :before et un :after mais on observe un décalage quand même, je te laisse tripatouiller cela

**Toufik83** · 30/03/2018, 00h09

-je ne peux pas utiliser un simple input, par ce que le contenu peut être du texte ET du HTML (émoticônes) .
-j'ai remis les pseudo :after et :before comme tu l'a mentionné NoSmoking, mais hélas, par ce que ça s'affiche mal sous IE (alignement vertical non pris en compte a cause de top:50% de [placeholder]:empty:after) + le petit décalage sous Firefox..., c'est un sérieux problème d'après ce que je vois

-je voudrai savoir si on peut utiliser le préfixes (-o,-moz,-webkit) pour ne pas attribuer la valeur du top:50% sous IE.

**NoSmoking** · 30/03/2018, 09h29

• Observations :
Bien que ne faisant pas partie du DOM les pseudo-éléments, :after et :before, interagissent avec celui-ci.
Le navigateur qui s'en sort le mieux est Chrome, pour FireFox, IE et Edge c'est selon l'humeur.
J'ai également constaté que FireFox ajoute un retour chariot <br> lorsque l'on supprime tout ce qui a été saisie rendant impossible le réapparition du « placeholder ».

• Solution :
Si l'on ne souhaite/peut pas utiliser d'<input> ou du javascript pour gérer cela la solution qui apparaît est de passer le pseudo-élément en display:none sur le focus de l'élément de saisie, ce qui nous donne les règles CSS simples suivantes

Code :

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

1
2
3
4
5
6
7
div[placeholder]:empty:before {
  content: attr(placeholder);
  color: #D8D8D8;
}
div[placeholder]:focus:before {  
  display: none;
}

**Toufik83** · 30/03/2018, 15h56

merci NoSmoking d'avoir pris le temps de me répondre, j'ai testé le code de ton dernier post, mais je n'ai pas trouvé mon bonheur.
apparemment, je vais ignorer IE9, l'essentiel pour moi c'est que cela fonctionne sur Firefox, chrome, opéra et safari..., j'ai testé sous IE10, cela fonctionne parfaitement bien.

Comportement pseudo::before et curseur dans un élément[contenteditable="true"] sous IE 9

CSS

Discussions similaires

Partager

Partager