Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How Do You Make A Custom Insertion Point With a Contenteditable Div In HTML?
The task we are going to perform in this article is about how do you make a custom insertion point with a contenteditable div in HTML. Let’s dive into the article for getting better understanding on making a custom insertion point with a contenteditable div in HTML.
The contenteditable div in HTML
The contenteditable global attribute is an enumerated attribute that specifies whether or not the element should be user editable. In that case, the browser changes its widget to enable editing.
Syntax
Following is the syntax for contenteditable -
<element contenteditable="true|false">
For getting more idea on making a custom insertion point with a contenteditable div in HTML, let’s look into the following examples
Example
In the following example we are running a script for making a custom insertion point with a contenteditable div.
<!DOCTYPE html>
<html>
<body style="background-color:#D5F5E3 ">
<div id="editable" contenteditable="true">
Welcome <br>To The <br>TutorialsPoint
</div>
<button id="button" onclick="insertionpoint()">Click</button>
<script>
function insertionpoint() {
var tutorial = document.getElementById("editable")
var range = document.createRange()
var select= window.getSelection()
range.setStart(tutorial.childNodes[2], 5)
range.collapse(true)
select.removeAllRanges()
select.addRange(range) 5. How Do You Make A Custom Insertion Point With a Contenteditable Div In HTML
}
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of text along with a click button on the webpage. When the user clicks the button, the text gets focused, allowing the user to insert or change the text.
Example
Consider the following example, where we are running the script to make custom insertion point with a contenteditable div.
<!DOCTYPE html>
<html>
<body style="background-color:#D6EAF8 ">
<div class="element" contenteditable="true">MSD</div>
<p class="element" contenteditable="true">Virat Kohli</p>
<script>
document.addEventListener('keydown', event => {
if (event.key === 'Enter') {
document.execCommand('insertLineBreak')
event.preventDefault()
}
})
</script>
</body>
</html>
On running the above script, the output window will pop up, displaying the text on the webpage. When the user clicks on the text, it gets focused and allows the user to make changes.
Example
Execute below simple ode to observe how we are making a custom insertion with a contenteditable div.
<!DOCTYPE html>
<html>
<body style="background-color:#E8DAEF ">
<style>
div.tutorial {
margin: 30px;
}
div.display {
display:inline-block;
background-color: #ABEBC6 ;
color: black;
width: 300px;
}
div.container {
-webkit-user-select: none;
}
.invisible {
visibility: hidden;
}
</style>
<div class="tutorial">
<div class="container">
<span class="invisible"></span><div class="display" contenteditable="true">
MSD
</div>
<div class="display" contenteditable="true">
MAHI
</div>
</div>
<div class="unrelated">Mahendra Singh Dhoni is an Indian former<br>
international cricketer who was captain of the Indian national cricket team
</div>
</div>
</body>
</html>
When the script is executed, it will produce text as well as content-editable text that is displayed on the webpage in green. When the user clicks on the text, it allows the user to insert or change the text.
260 Views
