Placeholder support for contentEditable elements, without JavaScript

Developer
Ariel Flesler
Size
1,863 Kb
Views
91,080
  1. Placeholder support for contentEditable elements, without JavaScript Previews
  2. Placeholder support for contentEditable elements, without JavaScript HTML Codes
  3. Placeholder support for contentEditable elements, without JavaScript CSS Codes

How do I make an placeholder support for contenteditable elements, without javascript?

What is a placeholder support for contenteditable elements, without javascript? How do you make a placeholder support for contenteditable elements, without javascript? This script and codes were developed by Ariel Flesler on 28 July 2022, Thursday.

Placeholder support for contentEditable elements, without JavaScript Previews
IQ Test

Placeholder support for contentEditable elements, without JavaScript - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Placeholder support for contentEditable elements, without JavaScript</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Placeholder support for contentEditable elements, without JavaScript</h1>
<div contenteditable="true" placeholder="Enter text here..."></div>
<p>All you need is to add the following CSS:</p>
<pre>
[contenteditable=true]:empty:before { content: attr(placeholder); display: block; /* For Firefox */
}
</pre>
<h2>Notes</h2>
<ul> <li>Can add a different style than actual text like opacity, italic, etc</li> <li>If your html needs to be 100% compliant, you can replace "placeholder" for "data-placeholder" on both files</li> <li>Chrome will add &lt;br />'s inside contentEditable elements in some cases, breaking the :empty check. Can be fixed with a bit of JavaScript.</li>
</ul>
<i>By Ariel Flesler</i>
</body>
</html>

Placeholder support for contentEditable elements, without JavaScript - Script Codes CSS Codes

[contenteditable=true]:empty:before{ content: attr(placeholder); display: block; /* For Firefox */
}
/* */
div[contenteditable=true] { border: 1px dashed #AAA; width: 290px; padding: 5px;
}
pre { background:#EEE; padding:5px; width: 290px;
}
Placeholder support for contentEditable elements, without JavaScript - Script Codes
Placeholder support for contentEditable elements, without JavaScript - Script Codes
Home Page Home
Developer Ariel Flesler
Username flesler
Uploaded July 28, 2022
Rating 4.5
Size 1,863 Kb
Views 91,080
Do you need developer help for Placeholder support for contentEditable elements, without JavaScript?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ariel Flesler (flesler) Script Codes
Name
YouTube Embed
JQuery Detection
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!