I'm trying to figure how can I enable document.designMode = 'on' for only specific elements, for example, h1 and paragraphs, without allowing the whole website to be edited.
Example Html. (I want the JS to work on h1's and p's.)
<html>
<head>
<title>Hello World<title>
</head>
<body>
<h1>Lorem Ipsum</h1>
<h3>Lorem Ipsum Lorem Det Spaghet</h3>
<p>Lorem Ipsum Det Spaghet, and kthetup super market</p>
</body>
</html>
Javascript
document.designMode = 'on'
I'm trying to figure how can I enable document.designMode = 'on' for only specific elements, for example, h1 and paragraphs, without allowing the whole website to be edited.
Example Html. (I want the JS to work on h1's and p's.)
<html>
<head>
<title>Hello World<title>
</head>
<body>
<h1>Lorem Ipsum</h1>
<h3>Lorem Ipsum Lorem Det Spaghet</h3>
<p>Lorem Ipsum Det Spaghet, and kthetup super market</p>
</body>
</html>
Javascript
document.designMode = 'on'
- Share your code with us – Aalexander Commented Jan 26, 2021 at 12:03
- Yes, I did the change. – akaI-Know Commented Jan 26, 2021 at 12:11
- HTMLElement.contentEditable – pilchard Commented Jan 26, 2021 at 12:23
2 Answers
Reset to default 5Did you tried contenteditable="true" ?
<h1 contenteditable="true">Lorem Ipsum</h1>
<h3>Lorem Ipsum Lorem Det Spaghet</h3>
<p>Lorem Ipsum Det Spaghet, and kthetup super market</p>use this code <div contenteditable="true">This text can be edited!</div>
and use document.designMode = "off";
or You can apply custom settings with jQuery For example $('.title').attr('contenteditable','true');
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis./ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
button{
width:200px;
height:30px;
border:1px solid #ddd;
border-radius:3px;
color:white;
}
.color_red{
background:red;
}
.color_green{
background:green;
}
</style>
</head>
<body>
<h1>Document designMode off Property</h1>
<p class="title">The designMode property sets whether the document is not editable or not.</p>
<p class="title">This document is not editable!</p>
<div class="mycls">
This text can be edited!
</div>
<button id="setEditable" class="color_green">Set tag p Editable</button>
<button id="removeEditable" class="color_red">Remove tag p Editable</button>
<script>
document.designMode = "off";
$('#setEditable').click(function () {
$('.title').attr('contenteditable','true');
});
$('#removeEditable').click(function () {
$('.title').attr('contenteditable','false');
});
</script>
</body>
</html>Test this code. it is work.
Good luck.