jquery를 사용하여 입력 상자의 텍스트 내용 조작

이번에는 jquery를 사용하여 입력 상자의 텍스트 내용을 조작할 때 주의 사항을 함께 살펴보겠습니다.

예제 코드는 다음과 같습니다.

<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>

주의 사항:

1.버튼, a, img 등에 해당되지 않습니다

2. 호출 쇼 인스턴스 이 이벤트는 메소드가 호출될 때 즉시 트리거됩니다.

shown.bs.popover: 이 이벤트는 팝오버 상자가 완전히 나타날 때 트리거됩니다(CSS 전환 효과가 완료될 때까지 기다립니다).

hide.bs.popover: 이 이벤트는 hide 인스턴스 메소드가 호출될 때 즉시 트리거됩니다.

hidden.bs.popover: 이 이벤트는 Tooltip이 완전히 숨겨지면 트리거됩니다(CSS 전환 효과가 완료될 때까지 기다립니다).

3. jquery 및 bootstrapheader 파일 소개

4. 버블링 취소

이 기사의 사례를 읽으신 후 해당 방법을 익히셨을 것으로 예상됩니다. 더 흥미로운 정보를 보려면 PHP에 있는 다른 관련 기사를 참조하세요. 중국사이트!

추천 자료:

입력 상자와 드롭다운 상자 간의 연결 효과 달성

Jquery 드롭다운 상자의 데이터를 동적으로 가져오는 방법

Ajax와 Jquery를 데이터베이스와 결합하여 생성 드롭다운 상자를 구현하기 위한 보조 연결

위 내용은 jquery를 사용하여 입력 상자의 텍스트 내용 조작의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!