jquery findet Schlüsselwörter im Eingabefeld und hebt sie hervor

Dieses Mal bringe ich Ihnen jquery, um Schlüsselwörter im Eingabefeld zu finden und hervorzuheben. Welche Vorsichtsmaßnahmen gibt es, damit jquery Schlüsselwörter in der Eingabe findet und hervorhebt? Box, das Folgende ist ein praktischer Fall, schauen wir uns das an.

Der Beispielcode lautet wie folgt:

<p>
  <a class="btn btn-success show" title="Popover title"
     data-container="body" data-toggle="popover" data-placement="bottom"
     data-content="底部的 Popover 中的一些内容"> aaaa </a>
</p>
<script>
  $(function () {
    initPopover();
  })
  function initPopover() {
    $(".show").popover({
      container: "body",
      trigger: " manual"  //手动触发
    }).on('show.bs.popover', function () {
      $(this).addClass("popover_open");
    }).on('hide.bs.popover', function () {
      $(this).removeClass("popover_open");
    });
    $(".show").click(function () {
      if ($(this).hasClass("popover_open")) {
        $(this).popover("hide")
      } else {
        $(".popover_open").popover("hide");
        $(this).popover("show");
      }
      var e = arguments.callee.caller.arguments[0] || event;
      e.stopPropagation();
    });
    $(document).click(function () {
      $(".show").popover("hide");
    });
  }
</script>

Hinweis:

1. Gilt nicht für Schaltflächen, a, img usw. sind verfügbar

2. show.bs.popover: Dieses Ereignis wird sofort ausgelöst, wenn die Show-Instanzmethode aufgerufen wird.

angezeigt.bs.popover: Dieses Ereignis wird ausgelöst, wenn das Popover-Feld vollständig angezeigt wird (wartet, bis der CSS--Übergangseffekt abgeschlossen ist).

hide.bs.popover: Dieses Ereignis wird sofort ausgelöst, wenn die Methode zum Ausblenden von Instanzen aufgerufen wird.

versteckt.bs.popover: Dieses Ereignis wird ausgelöst, wenn der Tooltip vollständig ausgeblendet ist (wartet, bis der CSS-Übergangseffekt abgeschlossen ist).

3. Führen Sie jquery und die Bootstrap-Headerdatei

ein 4. Blasen abbrechen

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung der jquery.picsign-Komponente

Detaillierte Erläuterung der Schritte zum Hinzufügen Zuweisungen zu untergeordneten Elementen mit jQuery

JS realisiert unendliche Lade- und Paging-Funktion auf mobilen Endgeräten

Das obige ist der detaillierte Inhalt vonjquery findet Schlüsselwörter im Eingabefeld und hebt sie hervor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!