国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

masyarakat

Belajar

Perpustakaan Alatan

Alat AI

Masa lapang

Melayu

Togol kawasan teks untuk bertukar antara kod HTML dan pratonton

P粉006977956 2024-03-31 11:52:47

592

Saya mahu menggunakan kawasan teks untuk bertukar antara kod HTML dan pratonton html

Apabila mengklik pada HTML, ia akan menunjukkan kod kawasan teks tersembunyi Apabila mengklik semula HTML, ia akan dipaparkan semula

Nak design macam ni

Saya dah cuba

<style>
.container {
    width:500px;
    position: fixed;
}

.right-element {
    background: red;
    display: inline-block;
    position: absolute;
    right: 0;
}
</style>

<div class="container">
    <div class="right-element">
        Preview
    </div>
  <textarea id="w3review" name="w3review" style="position:relative;width:100%;height:75%;resize: none; " ><h3>At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.</h3></textarea>    
</div>

P粉006977956

membalas semua(1)

P粉8313104042024-04-01 10:54:05 Tingkat 1

Anda boleh mempunyai div 專門用于顯示預(yù)覽。然后，當(dāng)用戶切換 HTML 視圖時(shí)，將文本區(qū)域的值插入到 div 的 innerHTML lain di dalamnya dan paparkannya.

Tetapi ini mungkin mendedahkan aplikasi anda kepada serangan XSS, jadi gunakannya dengan berhati-hati.

$('.right-element').click(function() {
  $(this).toggle()
  $(this).siblings().toggle()
  togglePreview()
})

let showPreview = false
const w3Preview = $('#w3review-preview')

function togglePreview() {
  if (!showPreview) {
    w3Preview.html(w3review.value)
    w3Preview.show()
    $(w3review).hide()
  } else {
    w3Preview.hide()
    $(w3review).show()
  }
  showPreview = !showPreview
}

#html,#w3review-preview{display:none}.container{position:fixed;width:500px}.right-element{background:red;display:inline-block;position:absolute;right:0;z-index:1}

sssccc

  
    
      Preview
    
    
      HTML
    
  
  <h3>At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.</h3>