Utilisation Multiple Id

Coucou le peuple :D

J'ai deux petites questions.

J'ai la tête dans les masques de saisie en ce moment et j'ai un petit problème :

J'ai le code suivant :

Code:

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
 
<html>
<head>
<title> jQuery Mask Test </title>
<script src="jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $.mask.definitions['~'] = "[+-]";
        $("#date").mask("99/99/9999",{placeholder:"mm/dd/yyyy",completed:function(){alert("completed!");}});
        $(".phone").mask("(999) 999-9999");
        $("#phoneEsp").mask("99 99 99 99 99");
        $("#phoneExt").mask("(999) 999-9999? x99999");
        $("#iphone").mask("+33 999 999 999");
        $("#tin").mask("99-9999999");
        $("#ssn").mask("999-99-9999");
        $("#product").mask("a*-999-a999", { placeholder: " " });
        $("#eyescript").mask("~9.99 ~9.99 999");
        $("#po").mask("PO: aaa-999-***");
        $("#pct").mask("99%");
        $("#phoneAutoclearFalse").mask("(999) 999-9999", { autoclear: false, completed:function(){alert("completed autoclear!");} });
        $("#phoneExtAutoclearFalse").mask("(999) 999-9999? x99999", { autoclear: false });
        $("input").blur(function() {
            $("#info").html("Unmasked value: " + $(this).mask());
        }).dblclick(function() {
            $(this).unmask();
        });
    });
</script>
</head>
<body>
<table>
		<tr><td>Date</td><td><input id="date" value="1231" type="text" tabindex="1" /></td><td>99/99/9999</td></tr>
		<tr><td>Phone</td><td><input class="phone" type="text" tabindex="2"/></td><td>(999) 999-9999</td></tr>
        <tr><td>Phone(Readonly)</td><td><input class="phone" type="text" tabindex="2" readonly/></td><td>(999) 999-9999</td></tr>
		<tr><td>Phone + Ext</td><td><input id="phoneExt" type="text" tabindex="2"/></td><td>(999) 999-9999? x99999</td></tr>
		<tr><td>Int'l Phone</td><td><input id="iphone" type="text" tabindex="2"/></td><td>+33 999 999 999</td></tr>
		<tr><td>Phone Espace</td><td><input id="phoneEsp" type="text" tabindex="2"/></td><td>99 99 99 99 99</td></tr>
		<tr><td>Tax ID</td><td><input id="tin" type="text" tabindex="3"/></td><td>99-9999999</td></tr>
		<tr><td>SSN</td><td><input id="ssn" type="text" tabindex="4"/></td><td>999-99-9999</td></tr>
		<tr><td>Product Key</td><td><input id="product" type="text" tabindex="5"/></td><td>a*-999-a999</td></tr>
		<tr><td>Eye Script</td><td><input id="eyescript" type="text" tabindex="6"/></td><td>~9.99 ~9.99 999</td></tr>
		<tr><td>Purchase Order</td><td><input id="po" type="text" tabindex="6"/></td><td>aaa-999-***</td></tr>
		<tr><td>Percent</td><td><input id="pct" type="text" tabindex="6"/></td><td>99%</td></tr>
        <tr><td>Phone (autoclear=false)</td><td><input id="phoneAutoclearFalse" type="text" tabindex="6"/></td><td>(999) 999-9999</td></tr>
		<tr><td>Phone + Ext (autoclear=false)</td><td><input id="phoneExtAutoclearFalse" type="text" tabindex="6"/></td><td>(999) 999-9999? x99999</td></tr>
</table>
<div id="info"></div>
</body>
</html>

Il fonctionne parfaitement, MAIS un question me turlupine. En haut nous avons plusieurs déclarations.

Prenons pour exemple celle-ci :

Code:

1
2
 
$("#phoneEsp").mask("99 99 99 99 99");

Ce mask est utilisable par la suite de la manière suivante :

Code:

<tr><td>Phone Espace</td><td><input id="phoneEsp" type="text" tabindex="2"/></td><td>99 99 99 99 99</td></tr>

Mais il n'est utilisable qu'une seule fois ... Comment faire pour pouvoir utiliser ce mask autant de fois que l'on veut ?

De cette manière :

Code:

1
2
3
4
 
<tr><td>Phone Espace 1</td><td><input id="phoneEsp" type="text" tabindex="2"/></td><td>99 99 99 99 99</td></tr>
<tr><td>Phone Espace 2</td><td><input id="phoneEsp" type="text" tabindex="2"/></td><td>99 99 99 99 99</td></tr>
...

Ma deuxieme question est :

A quoi correspondent ces # et ces . dans les déclarations du haut ?

Code:

1
2
3
 
$(".phone").mask("(999) 999-9999");
$("#phoneEsp").mask("99 99 99 99 99");

Et ... une troisieme question, puisqu'on y est :mrgreen:

Est-il possible de mettre deux id pour un seul et même champ ?

De la manière suivante :

Code:

<input id="id1 id2" type="text" />

?
Merci d'avance pour votre aide :p

Un id DOIT être unique sur une page ...
Un element ne doit avoir qu'un seul id

utilises les class, plusieurs éléments peuvent avoir le même className
Un element peut avoir plusieurs className

Haha super, merci !

Je viens d'avoir un déclic... Forcement qu'un ID doit être unique :weird: Cruche que je suis !:boulet:

Code:

1
2
 
        $(".phoneEsp").mask("99 99 99 99 99");

Code:

1
2
3
4
 
	<tr><td>Phone 1</td><td><input class="phoneEsp" type="text" tabindex="2"/></td><td>99 99 99 99 99</td></tr>
	<tr><td>Phone 2</td><td><input class="phoneEsp" type="text" tabindex="2"/></td><td>99 99 99 99 99</td></tr>
	<tr><td>Phone 3</td><td><input class="phoneEsp" type="text" tabindex="2"/></td><td>99 99 99 99 99</td></tr>

Fera donc l'affaire :aie:

Merci ! :king: