clavier virtuel (suite)
J-F Portala
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
SAM
> 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 :
<http://www.quirksmode.org/js/findpos.html>
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
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
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" <stephanemor...@wanadoo.fr.invalid> a écrit dans le message
de news: 4909f7aa$0$867$ba4a...@news.orange.fr...
SAM
> 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 :
<http://cjoint.com/?lcllcAENyh>
> 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
> 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.
>>>
>>> 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.
<http://cjoint.com/?lckrc5T6AY>
> 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
> 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
Jeff
SAM
> merci beaucoup
> Jeff
sauf que offsetTop se réfère à son conteneur (offsetParent)
aussi bien dans IE que Fx
<http://msdn.microsoft.com/en-us/library/ms534303(VS.85).aspx>
<http://msdn.microsoft.com/en-us/library/ms534302(VS.85).aspx>
<https://developer.mozilla.org/Fr/DOM/Element.offsetTop>
--
sm
J-F Portala
Jeff