clavier virtuel (suite)

Le
J-F Portala
Bonjour,
j'ai enfin réussi à faire créer un clavier virtuel.
Le seul probleme est qu'il apparait à un endroit bien défini, et lorsque
j'ai une liste un peu longue,
et que je dois scroller plusieurs pages, le calvier virtuel reste à sa
position.

Je le fais apparaitre sur l'evenement focus du champ.
Est il possible de faire apparaitre le clavier à proximité du champ.

Je sèche un peu.

Merci de votre aide
Jeff
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #22031631
Le 10/30/08 8:08 AM, J-F Portala a écrit :
Bonjour,
j'ai enfin réussi à faire créer un clavier virtuel.
Le seul probleme est qu'il apparait à un endroit bien défini, et lorsque
j'ai une liste un peu longue,
et que je dois scroller plusieurs pages, le calvier virtuel reste à sa
position.

Je le fais apparaitre sur l'evenement focus du champ.
Est il possible de faire apparaitre le clavier à proximité du champ.



savoir repérer la position du champ
corriger celle du clavier qui sera en position:absolute;
relativement au body

trouver la position :

function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
}
while (obj = obj.offsetParent);
}
return [curleft,curtop];
}


css:
=== #clavier { position: absolute; border: 1px solid; left: 300px;
background:#ffc; height: 150px; display: none }

JS:
== function clavier(where) {
var c = document.getElementById('clavier');
var pos = 0;
if(where.offsetParent) {
do {pos += where.offsetTop;} while(where = where.offsetParent);
}
c.style.top = pos + 'px';
c.style.display = 'block';
}

html:
==== <form>
<p><input onfocus="clavier(this);">
<p><input onfocus="clavier(this);">
<p><input onfocus="clavier(this);">
<p><input onfocus="clavier(this);">
</form>
<div id="clavier">#### clavier ####</div>

--
sm
Olivier Masson
Le #22031511
SAM a écrit :
Le 10/30/08 8:08 AM, J-F Portala a écrit :
Bonjour,
j'ai enfin réussi à faire créer un clavier virtuel.
Le seul probleme est qu'il apparait à un endroit bien défini, et
lorsque j'ai une liste un peu longue,
et que je dois scroller plusieurs pages, le calvier virtuel reste à sa
position.

Je le fais apparaitre sur l'evenement focus du champ.
Est il possible de faire apparaitre le clavier à proximité du champ.



savoir repérer la position du champ
corriger celle du clavier qui sera en position:absolute;
relativement au body

trouver la position :

function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
}
while (obj = obj.offsetParent);
}
return [curleft,curtop];
}


css:
=== > #clavier { position: absolute; border: 1px solid; left: 300px;
background:#ffc; height: 150px; display: none }

JS:
== > function clavier(where) {
var c = document.getElementById('clavier');
var pos = 0;
if(where.offsetParent) {
do {pos += where.offsetTop;} while(where = where.offsetParent);
}
c.style.top = pos + 'px';
c.style.display = 'block';
}

html:
==== > <form>
<p><input onfocus="clavier(this);">
<p><input onfocus="clavier(this);">
<p><input onfocus="clavier(this);">
<p><input onfocus="clavier(this);">
</form>
<div id="clavier">#### clavier ####</div>




Je prends le fil en cours, donc je vais probablement dire une bêtise,
mais pourquoi utiliser JS alors que le positionnement relatif sert à ça ?
Et si on veut utiliser le positionnement absolu (par exemple parce que
les input ne sont pas dans le flux), il est bon de savoir que ce dernier
se fait par rapport au dernier conteneur positionné. Donc pas besoin
d'utiliser du JS.
J-F Portala
Le #22031311
Merci beaucoup

cela marche.

Encore deux petites questions:
A quoi sert la boucle
if(where.offsetParent) {
do {pos += where.offsetTop;} while(where = where.offsetParent);
}


J'ai un peu de mal à saisir. (on parcourt tous les objets, mais en partant
duquel?).

Est ce qu'il m'est possible de gérer le debut et la fin de page.
Lorsque je suis sur les derniers champs le bas du clavier est masqué, et si
je le relève c'est lorsque je suis en haut de la page que ceal pose un léger
probleme.
Est ce que je peux connaitre la taille de la page et donc modifier la
position du clavier si je risque d'être en dehors de la page.
Je ne vois pas comment régler cela autrement.

Encore merci de ton aide efficace.

Jeff


"SAM" de news: 4909f7aa$0$867$
Le 10/30/08 8:08 AM, J-F Portala a écrit :
Bonjour,
j'ai enfin réussi à faire créer un clavier virtuel.
Le seul probleme est qu'il apparait à un endroit bien défini, et lorsque
j'ai une liste un peu longue,
et que je dois scroller plusieurs pages, le calvier virtuel reste à sa
position.

Je le fais apparaitre sur l'evenement focus du champ.
Est il possible de faire apparaitre le clavier à proximité du champ.



savoir repérer la position du champ
corriger celle du clavier qui sera en position:absolute;
relativement au body

trouver la position :

function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
}
while (obj = obj.offsetParent);
}
return [curleft,curtop];
}


css:
=== > #clavier { position: absolute; border: 1px solid; left: 300px;
background:#ffc; height: 150px; display: none }

JS:
== > function clavier(where) {
var c = document.getElementById('clavier');
var pos = 0;
if(where.offsetParent) {
do {pos += where.offsetTop;} while(where = where.offsetParent);
}
c.style.top = pos + 'px';
c.style.display = 'block';
}

html:
==== > <form>
<p><input onfocus="clavier(this);">
<p><input onfocus="clavier(this);">
<p><input onfocus="clavier(this);">
<p><input onfocus="clavier(this);">
</form>
<div id="clavier">#### clavier ####</div>

--
sm
SAM
Le #22031301
Le 11/2/08 9:22 AM, J-F Portala a écrit :
Merci beaucoup

cela marche.

Encore deux petites questions:
A quoi sert la boucle
if(where.offsetParent) {
do {pos += where.offsetTop;} while(where = where.offsetParent);
}


J'ai un peu de mal à saisir. (on parcourt tous les objets, mais en partant
duquel?).



IE bouillonne dans un sens (l'objet est repéré / window)
je suppose donc que :
pos += where.offsetTop;
suffit à IE
d'autres brouteurs bouillonnent dans l'autre sens
et pour eux il faut reparcourir l'imbrication des conteneurs de l'objet,
chaque objet prenant ses repères par rapport à son conteneur.
(à ce que j'ai compris ! ?)

Lorsque je suis sur les derniers champs le bas du clavier est masqué, et si
je le relève c'est lorsque je suis en haut de la page que ceal pose un léger
probleme.



On peut tout bonnement le placer relativement à la fenêtre.
Il suffit de le placer :
- en fixed pour les brouteurs normaux
- en absolute (+ adaptation JS) pour IE
Voir :

Est ce que je peux connaitre la taille de la page et donc modifier la
position du clavier si je risque d'être en dehors de la page.
Je ne vois pas comment régler cela autrement.



en rajoutant du blanc en fin de page ?

--
sm
SAM
Le #22031291
Le 10/31/08 9:22 AM, Olivier Masson a écrit :
SAM a écrit :
Le 10/30/08 8:08 AM, J-F Portala a écrit :
Bonjour,
j'ai enfin réussi à faire créer un clavier virtuel.

Je le fais apparaitre sur l'evenement focus du champ.
Est il possible de faire apparaitre le clavier à proximité du champ.






(...)
css:
=== >> #clavier { position: absolute; border: 1px solid; left: 300px;
background:#ffc; height: 150px; display: none }

JS:
== >> function clavier(where) {
var c = document.getElementById('clavier');
var pos = 0;
if(where.offsetParent) {
do {pos += where.offsetTop;} while(where = where.offsetParent);
}
c.style.top = pos + 'px';
c.style.display = 'block';
}

html:
==== >> <form>
<p><input onfocus="clavier(this);">
<p><input onfocus="clavier(this);">
<p><input onfocus="clavier(this);">
<p><input onfocus="clavier(this);">
</form>
<div id="clavier">#### clavier ####</div>




Je prends le fil en cours, donc je vais probablement dire une bêtise,
mais pourquoi utiliser JS alors que le positionnement relatif sert à ça ?



Il me semble que ça avait été proposé dans la démo première.

Et si on veut utiliser le positionnement absolu (par exemple parce que
les input ne sont pas dans le flux), il est bon de savoir que ce dernier
se fait par rapport au dernier conteneur positionné. Donc pas besoin
d'utiliser du JS.



Oui mais le JS c'est trop cool ! ;-)

--
sm
SAM
Le #22031281
Le 11/2/08 9:22 AM, J-F Portala a écrit :
if(where.offsetParent) {
do {pos += where.offsetTop;} while(where = where.offsetParent);
}


J'ai un peu de mal à saisir. (on parcourt tous les objets, mais en partant
duquel?).



Ben ... à partir de 'where'
c a d 'this' dans ;
<input onfocus="clavier(this);">
où 'this' est donc cet input là.

On parcourt l'imbrication des objets/éléments/balises à partir de celui
concerné, en remontant jusqu'à body.

--
sm
J-F Portala
Le #22031271
merci beaucoup
Jeff
SAM
Le #22065931
Le 11/3/08 3:22 PM, J-F Portala a écrit :
merci beaucoup
Jeff



sauf que offsetTop se réfère à son conteneur (offsetParent)
aussi bien dans IE que Fx


--
sm
J-F Portala
Le #22065331
Encore merci

Jeff
Publicité
Poster une réponse
Anonyme