Tambahkan teks pemegang tempat pada div dengan contenteditable=\'true\'

Anda mungkin pernah menjumpai atribut boleh diedit kandungan. Ia digunakan di banyak tempat. Ia adalah alternatif yang lebih baik kepada sesuatu seperti textarea. Anda boleh menambah contenteditable="true" pada mana-mana div dan kemudian ia bertindak seperti medan input. Dalam artikel ini, saya akan menunjukkan kepada anda cara menambah ruang letak pada teks padanya kerana ia tidak menyokong atribut pemegang tempat terus dari kotak.

Kod yang diperlukan

div[contenteditable] {
  &[placeholder]:empty::before {
    content: attr(placeholder);
    z-index: 9;
    line-height: 1.7;
    color: #555;
    word-break: break-all;
    user-select: none;
  }

  &[placeholder]:empty:focus::before {
    content: "";
  }
}

Itu sahaja kod yang anda perlukan! Walau bagaimanapun, jika anda hanya menambahnya pada CSS maka ia tidak akan berfungsi. Anda perlu menambah atribut pemegang tempat pada HTML anda dan juga memastikan bahawa div kelihatan.

Kod penuh / Contoh

HTML

<div contenteditable="true" placeholder="Subscribe to Axorax on YT! :D"></div>

CSS

div[contenteditable] {
  /* Basic styles */
  width: 20rem;
  height: 15rem;
  padding: 1rem;
  background: #292929;
  color: #fff;

  /* Placeholder code */
  &[placeholder]:empty::before {
    content: attr(placeholder);
    z-index: 9;
    line-height: 1.7;
    color: #555;
    word-break: break-all;
    user-select: none;
  }

  &[placeholder]:empty:focus::before {
    content: "";
  }
}

Itu sahaja yang ada. Semoga anda mendapati ia berguna!

Atas ialah kandungan terperinci Tambahkan teks pemegang tempat pada div dengan contenteditable=\'true\'. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!