Platzhaltertext zu div hinzufügen mit contenteditable=\"true\"

Möglicherweise sind Sie auf das Attribut contenteditable gestoßen. Es wird an vielen Orten verwendet. Es ist eine viel bessere Alternative zu so etwas wie einem Textbereich. Sie können contenteditable="true" zu jedem Div hinzufügen und es verhält sich dann wie ein Eingabefeld. In diesem Artikel zeige ich Ihnen, wie Sie Platzhalter zum Text hinzufügen, da das Platzhalterattribut nicht sofort unterstützt wird.

Der benötigte Code

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: "";
  }
}

Das ist alles, was Sie an Code brauchen! Wenn Sie das jedoch nur zum CSS hinzufügen, funktioniert es nicht. Sie müssen Ihrem HTML ein Platzhalterattribut hinzufügen und außerdem sicherstellen, dass das Div sichtbar ist.

Vollständiger Code/Beispiel

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: "";
  }
}

Das ist alles. Ich hoffe, Sie finden es nützlich!

Das obige ist der detaillierte Inhalt vonPlatzhaltertext zu div hinzufügen mit contenteditable=\"true\". Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!