HTML을 편집 가능한 jQuery로 전환하려면 클릭

6531 단어 HTMLjQuery

개요


클릭하면 HTML을 편집할 수 있습니다. 즉,

이것이 바로

이런 놈이야.

코드 예제


위 이미지의 코드는 다음과 같습니다.
index.html
<!DOCTYPE html>
<html>
<head>
  <title>sample</title>
  <meta charset="utf-8">
  <style type="text/css">
  .wrapper {
    width:400px;
    padding: 100px;
    text-align: center;
    background-color: #a2edde;
  }
  .click-me textarea {
    width: 100%;
    height: 100%;
    min-height: 3em;
    padding: 0;
  }
  </style>
</head>
<body>

  <h1>Click to Textarea</h1>
  <div class="wrapper">
    <p class="click-me">
      This <strong>text</strong> is <i>clickable</i>, so <a href="#">click me</a>!
    </p>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script>

  $(function() {

    $('.click-me').on('click', function() {
      var $editable = $(this);

      $editable.html('<textarea>' + $editable.html() + '</textarea>').find('textarea')
        .focus() // これが必要
        .on('focusout', function() {
            var valueOfTextarea = $(this).val();
          $editable.html( valueOfTextarea );
        })
        .on('click', function(ev) {
            // p.click-me のクリックイベントの発火を防止
          ev.stopPropagation();
        });
    });

  });

  </script>
</body>
</html>
기본적으로 textarea의 폭이 매우 좁기 때문에 CSS에 설정합니다.
푹 빠진 곳으로.

  • 제작<textarea> 이후 focus(), 최초focusout 불이 나지 않았다
  • stopPropagation()그렇지 않으면.click-me사건 재발화
  • 이런 곳인가?
    (저는 개인적으로 jQuery 선택기 처리에 푹 빠졌습니다.)

    좋은 웹페이지 즐겨찾기