ブラウザ上でテキストを編集する

スポンサーリンク

contenteditable

下記〇〇の箇所が編集できます。ソースコードも確認出来ます。

ブラウザ上でテキスト編集する

この星の名前は〇〇です!

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ブラウザ上でテキスト編集する</title>
<!-- テキストは中心表示 -->
<style>
p { text-align: center; }
</style>
</head>
<body>
<p><img src="/wp-content/uploads/2020/01/test.gif" alt=""></p>
<p>
<!-- 〇〇の箇所が編集可能 -->
この星の名前は<span contenteditable="true">〇〇</span>です!

</p>
</body>
</html>