changement de Focus
Bonjour et désolé pour mon titre pas très explicite. Je développe en PHP et je ne me suis pas encore mis au java script.
J'ai récupéré un bout de code java script pour l'adapter à mon projet. (j'ai besoin d'un clavier virtuel contenant uniquement les accents français pour des élèves qui aprennent le français à l'étranger)
je vous donne l'exemple de ce que j'ai fait : http://gwenael.free.fr/aria/1.html
Comme on peut le voir, le clavier virtuel fonctionne que pour un champ
le code html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
</style>
<link href="../style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="base.js"></script>
</head>
<body>
<form name="conversion">
<label for="pseudo">Je m'appelle</label> : <input type="text"name="nom" id="nom" min="3" maxlength="30"/>
<label for="pseudo">blabla</label> : <input type="text"name="nom1" id="nom1" min="3" maxlength="30"/>
<input type="button" onclick="alpha('é')" value="é">
<input type="button" onclick="alpha('è')" value="è">
<input type="button" onclick="alpha('ê')" value="ê">
<input type="button" onclick="alpha('ë')" value="ë">
<input type="button" onclick="alpha('à')" value="à">
<input type="button" onclick="alpha('â')" value="â">
<input type="button" onclick="alpha('ù')" value="ù">
<input type="button" onclick="alpha('û')" value="û">
<input type="button" onclick="alpha('î')" value="î">
<input type="button" onclick="alpha('ï')" value="ï">
<input type="button" onclick="alpha('ô')" value="ô">
<input type="button" onclick="alpha('œ')" value="œ">
<input type="button" onclick="alpha('ç')" value="ç">
</body>
</html>et le js
function alpha(item) {
var input = document.conversion.nom;
if (document.selection) {
input.focus();
range = document.selection.createRange() ;
range.text = item ;
range.select();
}
else if (input.selectionStart || input.selectionStart == '0') {
var startPos = input.selectionStart;
var endPos = input.selectionEnd;
var cursorPos = startPos;
var scrollTop = input.scrollTop;
var baselength = 0;
input.value = input.value.substring(0, startPos)
+ item
+ input.value.substring(endPos, input.value.length);
cursorPos += item.length;
input.focus();
input.selectionStart = cursorPos;
input.selectionEnd = cursorPos;
input.scrollTop = scrollTop;
}
else {
input.value += item;
input.focus();
}
}Tout semble se passer dans la deuxième ligne du js, mais je n'arrive à rien.... Faut il revoir le code ou juste une petite modif suffirait?
3 réponses
Bonjour Nui,
Le problème vient de la selection systhémtique de input text (id: nom) , dans la fonction alpha. ("var input = document.conversion.nom;")
Pour résoudre votre problème, il faut savoir lequel des input(text) a le focus.
Voilà ce que j'ai fait pour répondre à votre problèmatique.
https://plnkr.co/edit/xDua1MFwnDVmZl5fTYG1?p=preview
PI: J'ai rajouté la librairie Jquery. Faites bien attention à l'ordre de déclaration des scripts.
Houla..... heuuuu.... Un grand merci!.. j'avais peur d'un code trop long! car ce petit bout de js sera accompagné d'une mutitude de page php que je prépare pour un camp de Français (300 élèves qui vont jouer à un jeux de piste géant à l'aide de leur smartphone et qui devront scanner des QR code ici et là qui aboutissent sur une page web pour éxécuter un petit exercice de français pour marquer des points) Ce jeux de piste se joue au fin fond de la campagne, et avec la 3G, des pages de 3ko , ca devrait le faire! J'ai testé le code et je peux rajouter des champs sans problèmes... c'est tout bonnement parfait.
Juste une dernière question, le fait de rajouter la librairie jquery, est ce que ça risque de ralentir la connection, ou ce sera insignifiant?
Je ne pense pas que ça pose problème, le fichier minifier fait 94ko et sera mis en cache au premier appel (donc un seul chargement).
Sinon autre solution modifier le code que j'ai ajouté par du pure javascript.
J'ai mis le code avec Jquery en commentaire et rajouter la version pure js. Plus besoin de jQuery.