Mit Bootstrap Dropdown - Fokus Input via Jquery

Ich bin mit dem code unten, ist Teil von Bootstrap Framework.

Mein Ziel ist es, die Schwerpunkte der Eingabe, wenn klicken Sie auf <a>name</a> über die Jquery-Taste/Fokus-Funktionen. Ich weiß schon, es geht um die data-toggle="dropdown" Attribut in der a link machen das es nicht funktioniert. Ich bin nicht wirklich erfahren. Hoffentlich hat jemand etwas Hilfe für mich!

<html>
<body>
<li class="dropdown">
<a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="#"><i class="icon-user"></i> name </a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>
<form ...>                                      
<input type="text" id="4711" /> 
</form>
</li>
</ul>
</li>
</body>
</html>



<script>
$('#dLabel').click(function() {
  $('#4711').focus();
});
</script>
  • Dein html-code ist falsch, Sie sollte in der Nähe des html-Tags nach dem schließenden body-tag nicht vor
InformationsquelleAutor user1946431 | 2013-05-13
  1. 5

    Sollten Sie Ihren code im document-ready-handler:

    {for bootstrap, könnten Sie ein timeout als ein einfacher workaround}

    SIEHE DEMO

    $(function () {
    $('#dLabel').click(function () {
        setTimeout(function(){$('#login').focus();},0);
    });
    $('.dropdown input[type=text]').click(function(e){
        e.stopPropagation();
    });
});
    • Sie jsfiddle zu veranschaulichen, dein problem verstehe ich nicht, was du redest.
    • danke für deine schnelle Antwort! im Grunde seine arbeiten,ja. aber das problem ist bei der Verständigung mit bootstrap dropdown! ich fügte hinzu, bootstrap js-Bibliothek fsfiddle dass es mehr klar! plz nehmen viel in Sie. meine Hoffnung war, vielleicht um zu hören, für die bootstrap-dropdown-Funktion und rufen Sie dann die Fokus-Funktion. aber wieder, ich bin nicht wirklich expierienced, so bin ich sehr froh, wenn jemand helfen kann!
    • hier ist das jsfiddle link: jsfiddle.net/uNrmS/3
    • aktualisierte Antwort mit einem einfachen workaround
    • dies funktioniert perfekt! nur noch eine Letzte Frage für mein Verständnis! die setTimout() mit dem parameter 0 bedeutet kein timeout. Warum nicht gleich einfach mit $('#login').focus()?
    • Selbst eingestellt auf 0, wird dann ein timeout nehmen ein paar ms (8-15) zu entlassen callback-Funktion. Dies ist gerade genug, um lassen Sie bootstrap-rendering seine html/css, die konnte mischte sich mit allen anderen Prozeduren. In deinem Fall, ich weiß nicht genau, warum bootstrap-Pause ausgelöst, der Fokus scheint aber relativ zur CSS-pseudo-Klassen.
    • thx nochmal. denke, das könnte hilfreich sein, um mehrere Aufgaben

    InformationsquelleAutor A. Wolff
  2. 0

    Einen workaround-Lösung ist mit dem label-element mit dem Attribut statt element a.

    ...
  <li class="dropdown">
    <label for="4711" class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown">
    <i class="icon-user"></i> name </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
      <li>
      <form ...>                                      
        <input type="text" id="4711" /> 
      </form>
      </li>
    </ul>
  </li>
...
    InformationsquelleAutor fnandogp
  3. 0

    Wenn Sie nicht mit einem label und möchten einen link-dann kann man tatsächlich beobachten die Ereignisse, ausgelöst durch die dropdowns und behandeln es auch so. Sie können sehen, alle Veranstaltungen unter: https://getbootstrap.com/docs/4.0/components/dropdowns/#events

    Für diesen Fall würden Sie wollen, um die gezeigt.bs.dropdown-Ereignis, so dass Ihr code wäre wie folgt:

    <html>
    <body>
        <li id="dropdownParent" class="dropdown">
            <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="#"><i class="icon-user"></i> name </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                <li>
                    <form ...>
                        <input type="text" id="4711" />
                    </form>
                </li>
            </ul>
        </li>
    </body>
</html>

<script>
  $('#dropdownParent').on('shown.bs.dropdown', function() {
    $('#4711').focus();
  });
</script>
    InformationsquelleAutor spyke01
Schreibe einen Kommentar