Déselectionner un control (contentEditable)

Version imprimable

12/07/2007, 16h28
danyboy85

Déselectionner un control (contentEditable)

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:

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
12/07/2007, 16h32
SpaceFrog

blur()...

ceci étant ton truc ne fonctionnera que sous IE avec contentEditable
12/07/2007, 16h37
danyboy85

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...
12/07/2007, 17h00
SpaceFrog

je ne sais pas c'est trop propriétaire IE pour moi ... :(
12/07/2007, 17h07
danyboy85

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 ;)
12/07/2007, 17h13
SpaceFrog

peut être en forçant un selectionstart ? ou un truc du genre ???
12/07/2007, 21h46
FremyCompany

Faire un focus() sur un INPUT type="hidden" ?
13/07/2007, 11h17
danyboy85

Hey bien joué Fremmy :D

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:

<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
13/07/2007, 14h19
FremyCompany

Code:

.hiddenInput { visibility: hidden }

?
13/07/2007, 14h21
danyboy85

Nan pareil...
13/07/2007, 14h23
FremyCompany
Si jamais le problème c'est le display: none;
Code:

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 ;)
13/07/2007, 14h27
danyboy85

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

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.:bug:

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

Merci de votre aide !
13/07/2007, 14h29
SpaceFrog

rajoute dans le style

Code:

border:0

+ un petit disabled pour la route
13/07/2007, 14h31
danyboy85

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
13/07/2007, 14h36
SpaceFrog

Code:

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

invisible chez moi

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

Code:

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>

13/07/2007, 14h55
SpaceFrog

Code:

position:absolute; z-index:12;
13/07/2007, 14h57
danyboy85

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

Code:

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)

13/07/2007, 15h04
FremyCompany

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 ;)
13/07/2007, 15h08
danyboy85

Je préfère l'dée de SpaceFrog (qui maintenant fonctionne) ou bien la tienne concernant le transparence.

Je trouve que c'est plus "[("propre")]" que le setTimeout.

Bon en tout cas j'ai de quoi résoudre mon problème maintenant !!

C'est cool d'avoir des gens aussi réactifs que vous 2. Encore une fois merci !