Utilisation Multiple Id

**Sophiaduweb** · 20/06/2016, 17h20

Coucou le peuple

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 :

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
 
<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 :

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

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

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

Code :

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

<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 :

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

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 :

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

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

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

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

De la manière suivante :

Code :

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

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

?
Merci d'avance pour votre aide :p

**SpaceFrog** · 20/06/2016, 17h22

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

**Sophiaduweb** · 20/06/2016, 17h28

Haha super, merci !

Je viens d'avoir un déclic... Forcement qu'un ID doit être unique

Cruche que je suis !

Code :

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

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

Code :

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

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

Merci !

Utilisation Multiple Id

jQuery

Vue hybride

Discussions similaires

Partager

Partager