HTML을 편집 가능한 jQuery로 전환하려면 클릭
개요
클릭하면 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에 설정합니다.
푹 빠진 곳으로.
위 이미지의 코드는 다음과 같습니다.
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> 이후 focus(), 최초focusout 불이 나지 않았다stopPropagation()그렇지 않으면.click-me사건 재발화(저는 개인적으로 jQuery 선택기 처리에 푹 빠졌습니다.)
Reference
이 문제에 관하여(HTML을 편집 가능한 jQuery로 전환하려면 클릭), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/noobar/items/12a2b9a1b8687bb9f94d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
