Ankündigung

Einklappen
Keine Ankündigung bisher.

Jquery + autofocus?

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Jquery + autofocus?

    Hallo Leute, ich bin gerade bei einem Problem, welches ich einfach nicht gelöst kriege, eigentlich ganz simple, aber selbst Google hilft nicht. Ich möchte nämlich ein Input Feld mit autofocus austatten, nur leider liegt dieses Feld in eine Jquery Function, dadurch klappt "autofocus" schonmal nicht. Aber auch die .focus() funktion klappt nicht. Hier der Code:

    Code:
    <script type="text/javascript">
    
    
     $("#field").click(function() {
        $("#field").replaceWith("<input id=\"textbox\" type=\"text\" placeholder=\"Search on Google...\" onkeydown=\"if (event.keyCode == 13 || event.which == 13) { location='http://www.google.com/search?q=' + encodeURIComponent(document.getElementById('textbox').value);}\" />");
    
     })
    
    </script>
    Weiß einer von euch weiter?


  • #2
    Was klappt nicht? Du rufst .focus() ja nirgends auf. "Autofokus" kann ja nicht funktionieren, weil du ja schon einen Klick benötigst, damit das Element überhaupt geladen wird. Danach solltest du mit $("textbox").focus() aber kein Problem haben.

    Kommentar


    • #3
      Vielleicht ist es einfacher, das Feld per JavaScript aufzubauen...

      Code:
      // ungetestet
      var input = $('<input id="textbox" type="text" placeholder="Search on Google">');
      input.keydown(function(event) {
          if (event.keyCode == 13 || event.which == 13) {  
               location='http://www.google.com/search?q=' + encodeURIComponent(document.getElementById('textbox').value);
          }
      });  
      $("#field").replaceWith(input);
      input.focus();
      http://www.fynder.de - Tutorials zum Thema Technik

      Kommentar


      • #4
        Tropi
        Ich habe bereits focus() in überall in der Funktion ausprobiert, nur klappt es nirgednwo.

        Andreas
        Leider klappt der Code nicht, da direkt beim laden der Seite das Input Feld dort steht.
        $("#field").replaceWith(input); input.focus(); bewirkt nichts.

        Kommentar


        • #5
          Zitat von inabarren Beitrag anzeigen
          Tropi
          Ich habe bereits focus() in überall in der Funktion ausprobiert, nur klappt es nirgednwo.
          Wie gesagt, es wäre gut wenn du deine Ansätze zeigst. $("textbox").focus(); direkt nach dem replaceWith() funktioniert. Keine Ahnung wo du das sonst hingeben möchtest.

          Kommentar


          • #6
            Nein, klappt leider nicht. Und du meinst sicherlich anstatt "textbox" "field", so heißt die ID nämlich..

            Wie dem auch sei, es klappt leider nicht.

            Kommentar


            • #7
              Nein, du ersetzt das Element mit der ID "field" durch ein Input-Feld mit der ID "textbox". Natürlich musst du dann auch "textbox" fokussieren, field ist ja gar nicht mehr im DOM.
              Und natürlich funktioniert's, ich hab's ausprobiert. Aber wenn wir nicht sehen was du falsch machst werden wir den Fehler nie finden.

              Kommentar


              • #8
                Wie genau meinst du das? Ich komm grad nicht hinterher...

                Kommentar


                • #9
                  Du musst konsistent bei der Verwendung der ID bleiben. "#field" rausschmeissen, "#textbox" einfügen und dann auf "#field" wieder zugreifen geht eben nicht, wie Tropi erklärt hat - das Element mit der ID "#field" existiert nicht mehr!
                  Über 90% aller Gewaltverbrechen passieren innerhalb von 24 Stunden nach dem Konsum von Brot.

                  Kommentar


                  • #10
                    Hey, habe jetzt alles auf #textbox geändert. Klappt leider immer noch nicht, trotzdem Danke für die Hilfe.

                    Kommentar


                    • #11
                      Code:
                      <!DOCTYPE HTML>
                      <html>
                      <head>
                      <title>Untitled</title>
                      <style type="text/css">
                      <!--
                      .field{
                       background-color: #6666cc;
                       width: 150px;
                       color: #ffffff;
                      }
                      -->
                      </style>
                      <script src="jquery-1.10.1.js" type="text/javascript"></script>
                      <script type="text/javascript">
                      <!--
                      $(document).ready( function(){
                       $("#field").click(function(){
                        $("#field").replaceWith('<input id="textbox" type="text" placeholder="Search on Google...">');
                        $("#textbox").focus();
                        $("#textbox").keydown(function(event){
                         if(event.keyCode == 13){
                         window.location.href='http://www.google.com/search?q=' + encodeURIComponent($("#textbox").val());
                        }
                        });
                       });
                      });
                      // -->
                      </script>
                      </head>
                      <body>
                      <div class = "field" id = "field">Suche mit Google</div>
                      </body>
                      </html>

                      Kommentar


                      • #12
                        Zitat von inabarren Beitrag anzeigen
                        Tropi
                        Ich habe bereits focus() in überall in der Funktion ausprobiert, nur klappt es nirgednwo.

                        Andreas
                        Leider klappt der Code nicht, da direkt beim laden der Seite das Input Feld dort steht.
                        $("#field").replaceWith(input); input.focus(); bewirkt nichts.

                        Auch das Code-Beispiel von Andreas funktioniert. Du musst halt nur, wie du es bereits selber bei deinem Eingangspost getan hast,

                        "#field" durch input via "Click ersetzen:

                        Code:
                        $(document).ready( function(){
                         var input = $('<input id="textbox" type="text" placeholder="Search on Google">');
                         input.keydown(function(event) {
                          if (event.keyCode == 13 || event.which == 13) { 
                           location='http://www.google.com/search?q=' + encodeURIComponent(document.getElementById('textbox').value);
                          }
                         });
                         $("#field").click(function(){
                          $("#field").replaceWith(input);
                          input.focus();
                         });
                        });
                        Ein bißchen Nachdenken hilft manchmal . . .

                        Kommentar

                        Lädt...
                        X