WebView JQueryUI et autocompletion

**Lacuna** · 19/06/2013, 17h40

Bonjour,

Je travail sur un projet d'application Hybride sur Android (pour le moment).
En gros, j'ai une application créée en HTML5 et j'utilise une WebView pour l'intégrer dans une application Android.

J'ai une page d'authentification simple : login + mot de passe, et le widget d'auto-completion de JQueryUI activé sur le champ login (qui est un input classique).

L'auto-complétion fonctionne très bien sur desktop, et sur Android... presque.
Quand les choix de l'auto-complétion s'affichent, si j'en sélectionne un qui se trouve au dessus du champ de mot de passe, l'application réagit comme si j'avais sélectionné le choix dans la liste ET cliqué dans le champ password.
Du coup, mon choix d'auto-complétion se fait bien et le curseur se positionne dans le champ login, mais comme le champ mot de passe à été sélectionné aussi, je retrouve mon curseur également dedans. (En gros je me retrouve avec 1 curseur dans chaque input, et si j'écris quelque chose, les 2 se remplissent en même temps)

Quelqu'un à déjà eu ce genre de problème ?

Merci !

**Lacuna** · 24/06/2013, 09h52

Bonjour,

J'ai fait une pseudo résolution en utilisant les deux méthodes "open" et "close" de l’auto-complétion.
Dans open, j'ajoute l'attribut "disabled" au champ password et dans close je supprime cet attribut.

Ça me plait moyen, mais impossible de trouver la cause du problème.

**Feanorin** · 30/06/2013, 20h29

Tu dois avoir un gros souci car normalement un seul widget peut avoir le focus ?

J'aimerais bien voir ce que tu as fait

**Lacuna** · 03/07/2013, 10h17

Bonjour,

Je ne peux pas mettre mon code entièrement, mais voici un aperçu :

L'appli android ne possède qu'une WebView (j'ai une classe qui étend WebView) qui ne contient pas grand chose

Code :

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

1
2
3
4
5
6
7
 
WebSettings webSettings = getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setSavePassword(false);
addJavascriptInterface(new WNNativeInterface(context, this), "NativeMethodProvider");
 
loadUrl(historyMap.get(0)); // la première page à charger

Et la page HTML en question contient ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<body>
	<div id="container">
		<header role="banner">
			<h1>...</h1>
		</header>
		<hr />
 
		<div id="wrapper">
			<div id="main" role="main">
				<form id="login" class="k-login" method="post" action="liste_rdv.html">
					<fieldset>
						<legend>Identification</legend>
						<p><label for="userid-tag">Identifiant</label> 
							<input type="text" id="userid-tag" name="userid-tag"/>
						</p>
						<p><label for="password-tag">Mot de passe</label> 
							<input type="password" id="password-tag" name="password-tag" title="Le mot de passe doit présenter plus de huit caractères et au moins un caractère spécial" /> 
							<span class="lost-password"><a href="#">Mot de passe oublié ?</a></span>
						</p>
						<p><input type="submit" value="ok" /></p>
					</fieldset>
				</form>
			</div><!-- /main -->
		</div><!-- /wrapper -->
 
		<footer role="contentinfo">
			<p class="k-copyright">...</p>
		</footer>
	</div>
</body>

Et le code JS qui permet d'activer l'auto-complétion sur l'élément "login" (avec la bidouille des méthodes "open" et "close" pour "corriger" le problème):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
function enableAutoComplete(/*jquery object*/ input, /*String*/ type) {
	/**
        * Enable autocomplete method.
        * open and close methods are used for prevent bug when an item is
        * selected above password input.
        */
	input.autocomplete({
		create : function(event, ui) {
			/* Used because css was scoped with "autocompletion" class */
			$('.ui-autocomplete').wrap('<div class="autocompletion"></div>');
		},
 
		open : function(event, ui) {
			var passwordInput = $('#password-tag');
			if (passwordInput) {
				passwordInput.attr('disabled', 'disabled');
			}
		},
 
		close : function(event, ui) {
			var passwordInput = $('#password-tag');
			if (passwordInput) {
				passwordInput.removeAttr('disabled');
			}
		}
	});
 
	/* New source for autocompletion when keyup */
	input.keyup(function(e) {
		var userArray = new Array();
 
		try {
			var value = input.val();
			var users;
			if (value != '') {
				users = NativeMethodProvider.getAutoCompletionData(value, type);
			}
 
			var usersObject = JSON.parse(users);
 
			for (var key in usersObject) {
				var value = usersObject[key];
				userArray.push(value);
			}
		} catch(errback) {
                     ...
		}
 
		input.autocomplete("option", "source", userArray);
	});
};

L'objet "NativeMethodProvider" dans le JS est une classe Java qui à été wrappée dans la WebView à la création de celle-ci grâce à "addJavascriptInterface(new WNNativeInterface(context, this), "NativeMethodProvider");", et qui permet tout simplement d'utiliser les méthodes de la classe Java depuis le JavaScript.
Dans l'exemple, afin de récupérer des données stockées dans une BDD gérée par du code Android (et non web).

WebView JQueryUI et autocompletion

Composants graphiques Android

Vue hybride

Discussions similaires

Partager

Partager