Αλλαγή τύπου φόρμας

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
shadow
Script Master
Δημοσιεύσεις: 606
Εγγραφή: 14 Απρ 2005 18:30

Αλλαγή τύπου φόρμας

Δημοσίευση από shadow » 10 Ιουν 2005 17:43

Εχω το εξής πρόβλημα. Εχω μια πολύ απλή φόρμα για login αλλα το design του site είναι τέτοιο ώστε δεν μπορώ στα πεδία username-password να βάλω καποιο label ωστε να φαίνεται οτι το ενα field ειναι για username και το αλλο για password. Η λυση ειναι να δωσω αρχικη τιμη στα πεδια και Onfocus να καθαριζουν. Αλλα για το password ο τυπος του πεδιου ειναι φυσικα password οποτε και αρχικη τιμη να δωσω δεν υπαρχει νοημα.

Κώδικας: Επιλογή όλων

<form name="login" action="" method="POST">
      <input class="log_name" type="text" name="username" value="username" onfocus="this.value='';">
     <input class="log_pass" type="password" name="password" value='password' onfocus="this.value='';">
     <input class="log_submit" type="submit" name="login">				
</form>
Υπαρχει δυνατοτητα με javascript να αλλαξω τον τυπο ενος πεδίου, κατα το Onfocus event , δηλαδη να εχω για το password αρχικα τυπο text και με το onfocus να το αλλαζω σε password?

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Αλλαγή τύπου φόρμας

Δημοσίευση από skeftomilos » 11 Ιουν 2005 13:16

Κώδικας: Επιλογή όλων

<html>
  <head>
    <script type="text/javascript">
      function makePassword&#40;textElement&#41; &#123;
        var element = document.createElement&#40;"input"&#41;
        element.setAttribute&#40;"type", "password"&#41;
        element.setAttribute&#40;"class", textElement.getAttribute&#40;"class"&#41;&#41;
        element.setAttribute&#40;"name", textElement.getAttribute&#40;"name"&#41;&#41;
        textElement.parentNode.replaceChild&#40;element, textElement&#41;
        setTimeout&#40;function&#40;&#41;&#123;element.focus&#40;&#41;&#125;, 10&#41;
      &#125;
    </script>
  </head>
  <body>
    <form name="login">
      <input type="text" name="password" value="password" onfocus="makePassword&#40;this&#41;">
      <input type="submit" name="login">
    </form>
  </body>
</html>
Το πιο απλό θα ήταν το εξής:

Κώδικας: Επιλογή όλων

onfocus="this.value='';this.type='password'"
... αλλά δυστυχώς δε δουλεύει παρά μόνο στον Firefox.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
shadow
Script Master
Δημοσιεύσεις: 606
Εγγραφή: 14 Απρ 2005 18:30

Αλλαγή τύπου φόρμας

Δημοσίευση από shadow » 11 Ιουν 2005 20:13

Thanks:) Δουλεύει μια χαρά , με την μόνη διαφορά οτι ο IE(%^%) δεν καταλαβαίνει το

Κώδικας: Επιλογή όλων

element.setAttribute&#40;"class", textElement.getAttribute&#40;"class"&#41;&#41;
, σε αντίθεση με τον firefox που δεν έχει πρόβλημα, οπότε αντι για κλάση χρησιμοποίησα ID και παίζει τέλεια.
Ευχαριστώ...

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Αλλαγή τύπου φόρμας

Δημοσίευση από skeftomilos » 11 Ιουν 2005 23:17

Αν θες μπορείς να δοκιμάσεις το παρακάτω μήπως δουλεύει καλύτερα:

Κώδικας: Επιλογή όλων

element.className = textElement.className
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης