Ändern Sie text-Feld-Grenze, wenn darauf geklickt wird

Ich mache eine website und möchte die Rahmenfarbe der Textfelder zu ändern, Sie auf schweben und wenn Sie angeklickt werden.

Ich habe gesucht und fand ein paar Leute, zeigt der code, wie es zu tun. Ich versuchte es aus meinem LAMP-server (weiß nicht, ob eingebettete JS funktionieren wird auf einem Lamp-server), obwohl es nicht funktioniert. Das war der code für javascript, die ich nicht wirklich wissen, also ich konnte nicht verstehen, was was schief läuft.

Dies ist der code: 

onload=function(){
    var inp=document.getElementsByTagName('input'), i=0, t ;
    while(t==inp[i++]){
        if(t.type=='text'){
            t.onclick=function(){this.style.border='1px solid red'}
        }
    }
}

</script>

Gibt es eine Möglichkeit, das zu tun, was ich will, nur mit CSS/html oder werde ich lernen müssen JavaScript ebenso?

Wenn Ihr nicht zu hart ist, könnte erklären, wie es zu tun, oder zeigen Sie mir einige Beispiel-code?

Jubel - Cohen.

  • Vom Klang sollte man nicht auch mit JavaScript. Benutzen Sie stattdessen css. Einen Einblick in Ihren html helfen würde, wenn.
  • Möchten Sie rote Grenze, sobald die <input> geklickt und dann halten Sie es für immer danach?
  • Nein, ich will es Weg, sobald Sie klicken Sie Weg.
InformationsquelleAutor cohen | 2011-10-09
  1. 3

    Ja das kann man mit CSS-pseudo-Klassen

    Hier ist ein Beispiel:

    <style>
  .fancyText:hover{border:1px solid red;}
  .fancyText:focus{border:1px solid red;}
</style>
<input type='text' class='fancyText' />
    • Bitte kündigen leere Elemente...
    • Okay, es behoben.
    • Wird diese Arbeit mit allen Browsern?
    • Neuere Versionen, ja... IE6? Nein, es wird nicht. :/
    • Viele Menschen nutzen den IE6? Ich denke, es würde die Materie Sie nicht, dass diese kleinen Effekte auf meiner Seite.
    • nur der hover funktioniert. Es bleibt nicht rot, wenn ich auf das Textfeld.

    InformationsquelleAutor Aaron
  2. 0

    @Aaron, ist richtig, und Sie besuchen kann, w3school für css lernen,

    wenn Sie wollen, dass es mit java-script brauchen Sie nur die Funktion onFocus, onBlur und Zugriff auf das text-Feld über id

    function change()
    {
        var a = document.getElementById('fansy');
        a.style.border = '1px solid red';
    }
    • Dies funktionierte nicht für mich, obwohl ich nicht wirklich weiß, JS so wahrscheinlich Tat ich es falsch :/
    • Was ist Los mit W3schools?
    • Keine Sorge, ich lese w3fools.com
    • Sie haben nichts zu tun mit der realen W3, Sie versuchen nur zu verkaufen, die Menschen wertlos Zertifizierungen und Sie haben es geschafft, zu betrügen Ihren Weg an die Spitze der Google-listings, und Sie geben schlechte Informationen finden Sie unter w3fools.com. Eine bessere Ressource web-Dinge ist developer.mozilla.org
    InformationsquelleAutor Ahmed
  3. 0

    Warum nicht mit jQuery um es einfacher zu machen?

    $(document).ready(function(){
    $('input').each(function(){
       if($(this).attr('type')=='text')
           {
               $(this).focus(function(){
                   $(this).css({'border':'1px solid red'}); 
               });
               $(this).blur(function(){
                   $(this).css({'border':'1px solid green'});
               });
           }
    });
});

    Dann erhalten Sie multi-browser-support auch....
    Vergessen Sie nicht <script src="[the_path_to_jquery_file]" type="text/javascript"></script>
    gehören die jquery-Datei.

    Wenn du diese ersetzen 

    $('input').each(function(){
       if($(this).attr('type')=='text')
           {
               $(this).focus(function(){
                   $(this).css({'border':'1px solid red'}); 
               });
               $(this).blur(function(){
                   $(this).css({'border':'1px solid green'});
               });
           }
    });

    mit diesem 

    $('input[type="text"]').each(function(){
          $(this).focus(function(){
                   $(this).css({'border':'1px solid red'}); 
               });
               $(this).blur(function(){
                   $(this).css({'border':'1px solid green'});
               });
    });

    du automatisch bekommen Sie die Eingaben mit attr. type = text.
    Hier ist mehr tatsächlich über jQuery attr Auswahl

    • Was ist die Dateiendung für ein jquery-Datei?
    • .js, es ist ein build-javascript-lib.
    • Wird dies für alle text-Boxen oder muss ich zu sagen, was Ihre Klasse / - id ist?
    • Nein, dies ist das gute Teil mit jquery. $('input').each(function(){ diese Funktion nimmt alle <input>'s und laufen entlang dieser, dann, wenn Ihre attr. nur text ist, wird es die Funktionen ausführen.
    • Man könnte auch festlegen, Klassen oder ids, wie diese. $('#button').each(function(){....}); für ids oder $('.button').each(function(){....}); für die Klassen.
    • Setze ich die <script src="[the_path_to_jquery_file]" type="text/javascript"></script> Teil irgendwo in der .php-Datei mit dem Textfeld?
    • Ja, oder vielleicht auch innerhalb der <head> - tag... Empfehlenswert!!!
    • Ja, ich kann nicht ankommen dieses zu wirken 🙁
    • Sie haben Hinzugefügt, die <script>-tag mit dem richtigen Pfad auf Ihrer lokalen/externen jquery-Datei? Bump das Loch code!
    • Wenn die .js-Datei im selben dir wie die php-Datei würde ich schreiben wie diese? <script src="name.js" type="text/javascript"></script> und dann setz ich einfach, dass im Kopf der php-Datei. Das ist, was ich Tat, und es Tat nichts :/
    • Okej, die die jQuery-Datei mit dem Namen name? Nicht in den Kopf der php-Datei, in der die <head></head> - tag wie diesem <head><script src="name.js" type="text/javascript"></script><script>your script.</script></head> Siehe Beispiel

    InformationsquelleAutor Max Allan
Schreibe einen Kommentar