Déselectionner un control (contentEditable)

**danyboy85** · 12/07/2007, 16h28

Bonjour à tous,

Je suis en train de réaliser un éditeur html simplifié sous IE, en utilisant l'attribut contentEditable de l'élément <div>.

Pour déselectionner un texte, il suffit d'utiliser la commande javascript :

Code :

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

document.selection.empty();

mais cela ne fonctionne pas pour déselectionner un bouton, une zone de texte... Cette commande ne fonctionne que pour du texte.

Existe-t-il une commande pour déselectionner un control ?

Merci d'avance

**SpaceFrog** · 12/07/2007, 16h32

blur()...

ceci étant ton truc ne fonctionnera que sous IE avec contentEditable

**danyboy85** · 12/07/2007, 16h37

A quoi j'associe la fonction blur() ?, car document.selection.blur() me retourne "Cet objet ne gère pas cette ropriété ou cette méthode"

J'ai essayé aussi : monBouton.blur() : même résultat...

**SpaceFrog** · 12/07/2007, 17h00

je ne sais pas c'est trop propriétaire IE pour moi ...

**danyboy85** · 12/07/2007, 17h07

C''est bien c'qui m'inquiète

...

Si je trouve une parade je poste ici.

N'hésitez pas à poster vos suggestions quand même

**SpaceFrog** · 12/07/2007, 17h13

peut être en forçant un selectionstart ? ou un truc du genre ???

**FremyCompany** · 12/07/2007, 21h46

Faire un focus() sur un INPUT type="hidden" ?

**danyboy85** · 13/07/2007, 11h17

Hey bien joué Fremmy

Ca fonctionne mais avec un <input type="text"> car le hidden n'accepte pas le focus : logique.

Par contre je n'arrive pas à masquer complétement l'input même en lui mettant une hauteur et une largeur de 0px...

Code :

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

<input type="text" id="abcd" style="width:0px;height:0px;line-height:0px;">

En fait je ne le vois pas à l'écran mais j'ai toujours un espace blanc d'une hauteur d'au moins 10 ou 15px;

J'ai essayé de jouer avec l'attribut display, mais ca provoque le même problème qu'avec un hidden

**FremyCompany** · 13/07/2007, 14h19

Code CSS :

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

.hiddenInput { visibility: hidden }

?

**danyboy85** · 13/07/2007, 14h21

Nan pareil...

**FremyCompany** · 13/07/2007, 14h23

Si jamais le problème c'est le display: none;

Code :

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

1
2
3
4
5
6
7
theInput.style.display="inline";
setTimeout(function() {
   theInput.focus();
   setTimeout(function () {
      theInput.style.display = "none";
   }, 0)
}, 0)

Affichera l'input, le focusera puis le fera disparaitre, le tout en moins de 5 millièmes de seconde, autrement dit, indétectable

**danyboy85** · 13/07/2007, 14h27

Mouais enfin là on commence à atteindre les limites de la bidouille.

Je crois que je vais carrément oublier cette idée de vouloir déselectionner mes éléments dynamiquement car j'ai l'impression que je n'aurais jamais quelque chose de réelement stable : 2, 3 clics mal placés et ca part en sucette.

Je vais essayer de contourner le problème et je poste ici.

Merci de votre aide !

**SpaceFrog** · 13/07/2007, 14h29

rajoute dans le style

Code :

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

 border:0

+ un petit disabled pour la route

**danyboy85** · 13/07/2007, 14h31

Non désolé ca ne change rien

EDIT : ah oui pardon, je suppose que ton post était un complément à la solution de Fremmy qui par ailleurs fonctionne.

Bon je ne peux pas dire que je soi entièrement convaincu mais la solution fonctionne donc je considère mon problème résolu

Merci

**SpaceFrog** · 13/07/2007, 14h36

Code :

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

<input type='text' style="height:1px;lineheight:1px;border:solid 0px;" disabled/>

invisible chez moi

**danyboy85** · 13/07/2007, 14h54

Invisible mais si tu le cale entre 2 <div>, tu as une hauteur d'au moins 10px entre les 2 <div>.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<html>
    <body>
        <div style="background-color:#FF0000">
        texte
        </div>
        <input type="text" id="abcd" style="height:1px;line-height:1px;border:solid 0px;">
        <div style="background-color:#FF0000">
        texte
        </div>
    </body>
</html>

**SpaceFrog** · 13/07/2007, 14h55

Code :

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

position:absolute; z-index:12;

**danyboy85** · 13/07/2007, 14h57

Ba teste sous IE mais chez moi ca ne change rien...

**SpaceFrog** · 13/07/2007, 15h01

Code :

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

1
2
3
<div style="background-color:red;">&nbsp;</div>
<input type='text' style="height:1px;lineheight:1px;border:solid 0px;position:absolute;z-index:12;top:0px;" disabled/>
<div style="background-color:green;">&nbsp;</div>

les divs se touchent ... (beuark)

**FremyCompany** · 13/07/2007, 15h04

Ou encore une idée tordue, utiliser la transparence et mettre le taux de transparences à 100 ou 99%

Mais si ma solution fonctionne, pk se casser la tête

Déselectionner un control (contentEditable)

JavaScript

Discussions similaires

Partager

Partager