ربما تكون قد صادفت السمة contenteditable. يتم استخدامه في العديد من الأماكن. إنه بديل أفضل بكثير لشيء مثل منطقة النص. يمكنك إضافة contenteditable = "true" إلى أي div ثم يعمل كحقل إدخال. في هذه المقالة، سأوضح لك كيفية إضافة عنصر نائب إلى النص لأنه لا يدعم سمة العنصر النائب فورًا.

الكود المطلوب

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

هذا هو كل الكود الذي تحتاجه! ومع ذلك، إذا قمت بإضافة ذلك فقط إلى CSS فلن يعمل. تحتاج إلى إضافة سمة عنصر نائب إلى HTML الخاص بك والتأكد أيضًا من أن القسم مرئي.

الكود الكامل/مثال

لغة البرمجة

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

هذا كل ما في الامر. اتمنى ان تجده مفيدا!