Problem:- Suppose, we have a contenteditable div or span tag on a web page, and it is generally pre-filled with some text. But, when I remove the content from editable span or div, then it becomes blank and the blank area on the web page makes the page a little bit weird and maybe the person doesn’t know that it can be writable.
Solution with CSS:-
For example, we have the following HTML sample:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
span, div {
margin: 10px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<h1>Editable Span and Div</h1>
<span contenteditable="true">Hi span</span>
<div contenteditable="true">Hi Div</div>
</body>
</html>
The output of the above HTML is as follows:
Now, suppose, I have removed the text from both the span and div and I start doing something on the web page. After removing the text from both span and div, it doesn’t look so good on a webpage as shown below:
So, here’s a very simple CSS solution to add a placeholder whenever someone removes the whole text from span or div.
span[contenteditable]:empty:focus::before,
span[contenteditable]:empty::before{
content: 'Write something in span';
}
div[contenteditable]:empty:focus::before, div[contenteditable]:empty::before {
content: 'Write something in div';
}
And whenever any user removes the whole content with backspace key from span and div, the span and div tags are filled with their respective placeholders and the output will be as shown below:
Study Section provides a big list of certification exams through its online platform. The French Certification Exam can help you to certify your skills to communicate in the French language. Whether you are new to the language or you are an expert in it, this French certification exam can test the ability of anybody’s command over the French language.
