HTMLの要素を編集できますか?

3459 ワード
html テキストリンク
これはHTML オプションは、しばしば表示されませんが、実際には本当にクールです.
があるHTML 属性contenteditable , そしてHTML 編集可能な要素🙊.
このcodepenにどのように見えるかをあなたに教えさせてください.
をクリックします.

HTMLコンテナーテーブル


我々は、単に追加することによって編集可能な要素を作ることができますcontenteditable タグ.
<div class="container">
  <h1 contenteditable="true">Welcome click me 🎯</h1>
  <p contenteditable="true">
    Did you know you can click me to edit my content?<br />
    Even big paragraphs 👀
  </p>
  <a contenteditable="true" href="#">View the full article</a>
</div>
3つの値を指定できます:
  • contenteditable="true" ~ コンテンツを変更することができます
  • contenteditable="false" ~ 変更できない
  • contenteditable="inherit" ~ 親が持つもの

    • JavaScriptの変更をキャプチャ


    もちろん、これはクールですが、それはあまり自分自身であまりしない、我々は実際にこれらの変更をキャプチャすることができますJavaScript .
    イベントリスナーを入力イベントにバインドしましょうcontenteditable タグ.
    var contents = document.querySelectorAll('[contenteditable]');

for (let content of contents) {
  content.addEventListener('input', function() {
    console.log('input changed to: ' + content.innerHTML);
  });
}

    ブラウザサポート


    これはネイティブだからHTML タグ、それは素晴らしいサポートしています!

    読んでいただきありがとうございます、接続しましょう！


    私のブログを読んでくれてありがとう.私の電子メール会報を購読して、接続してくださいFacebook or
    【iOS】ハンバーガーメニューの作り方
    [1439]反転