ios clavier js

OS/ios/15/apps/js/clavier.js

@@ -0,0 +1,49 @@
+// Sélectionnez tous les éléments <a> qui contiennent des éléments <p> avec la classe.number
+var anchorElements = document.querySelectorAll('a');
+
+// Sélectionnez l'élément input
+var inputField = document.querySelector('input[type="text"]');
+
+// Parcourez chaque élément <a> et ajoutez un écouteur d'événements click
+anchorElements.forEach(function(anchor) {
+    anchor.addEventListener('click', function(e) {
+        // Empêchez l'action par défaut du lien (si nécessaire)
+        e.preventDefault();
+
+        // Trouvez le premier <p> enfant avec la classe.number à l'intérieur de l'élément <a> cliqué
+        var numberParagraph = this.querySelector('.number');
+        if (numberParagraph) { // Vérifie si un élément.number existe
+            var numberText = numberParagraph.textContent; // Obtenez le texte de l'élément.number
+
+            // Ajoutez le texte à l'élément input
+            inputField.value += numberText;
+        }
+    });
+});
+
+document.querySelector('input[type="text"]').addEventListener('input', function() {
+    if (this.value.length > 16) {
+        this.value = this.value.substring(0, 16); // Tronque le texte à 16 caractères
+    }
+});
+
+
+
+// Sélectionnez toutes les images dont l'attribut alt est "effacer"
+var deleteImages = document.querySelectorAll('img[alt="Effacer"]');
+
+// Sélectionnez l'élément input
+var inputField = document.querySelector('input[type="text"]');
+
+// Parcourez chaque image et ajoutez un écouteur d'événements click
+deleteImages.forEach(function(image) {
+    image.addEventListener('click', function(e) {
+        // Empêchez l'action par défaut du lien (si nécessaire)
+        e.preventDefault();
+
+        // Retirez un caractère de l'élément input
+        if (inputField.value.length > 0) {
+            inputField.value = inputField.value.slice(0, -1);
+        }
+    });
+});

OS/ios/15/apps/phone/clavier.html

@@ -26,7 +26,7 @@
 
     <main>
         <section class="app-head">
-            <input type="text">
+            <input type="text" maxlength="16">
             <a href="#">Ajouter ce numéro</a>
         </section>
         <section class="numbers">
@@ -87,7 +87,7 @@
             <article>
                 <a href="" class="icon"><img src="#" alt=""></a>
                 <a href="" class="icon"><img src="../../media/img/call.svg" alt="Téléphoner"></a>
-                <a href="" class="icon"><img src="../../media/img/delete.svg" alt="Effacer"></a>
+                <a href="#" class="icon"><img src="../../media/img/delete.svg" alt="Effacer"></a>
             </article>
         </section>
     </main>
@@ -117,6 +117,7 @@
         </nav>
     </footer>
     <script src="../../js/date.js"></script>
+    <script src="../js/clavier.js"></script>
 </body>
 
 </html>

OS/ios/15/apps/phone/style/clavier.css

@@ -96,10 +96,15 @@ main {
     justify-content: var(--c);
 }
 .app-head>input{
-    font-size: large;
+    font-size: x-large;
+    width: var(--full);
+    text-align: center;
     border: none;
     margin: 10px 0;
 }
+.app-head>input:focus-visible{
+    outline: var(--n);
+}
 .app-head>a{
     color: #007aff;
     margin: 10px 0;