Prevent from deleting the first paragraph inside a contenteditable div - javascript

I don't want to remove the first paragraph from the root div using the Backspace key. How can I prevent deleting the first or the only paragraph inside this contenteditable div? This paragraph should also editable. Javascript will help to prevent this paragraph. I need a idea.
.root {
max-width: 700px;
margin: 1rem auto;
border: 1px solid;
}
<div class="root" contenteditable="true">
<p id="block-1">I want to prevent this paragraph from delete.</p>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.root {
max-width: 700px;
margin: 1rem auto;
border: 1px solid;
}
</style>
</head>
<body>
<div class="root" contenteditable="true">
<p id="block-1">I want to prevent this paragraph from delete.</p>
</div>
<script>
const div = document.querySelector('.root');
const paragraph = document.getElementById('block-1');
div.addEventListener(
'input',
(event) => {
if (!event.target.contains(paragraph)) {
div.insertBefore(paragraph, div.firstChild);
}
},
false
);
</script>
</body>
</html>

Adding the following event listener to the root element will prevent the backspace key from doing anything if all it can do is delete the first paragraph, which is the only time that it can delete the first paragraph. It starts by checking for the backspace key, but before preventing the default action from occurring, it will also check to make sure that there is no text and there is only one paragraph left. This works because paragraphs can only be deleted without text content, and you can't remove the first paragraph unless it is the only paragraph left.
document.getElementsByClassName("root")[0].addEventListener("keydown", function (event) {
if (event.key == "Backspace" && this.textContent == "\n \n" && this.children.length <= 1) {
event.preventDefault()
}
})
.root {
max-width: 700px;
margin: 1rem auto;
border: 1px solid;
}
<div class="root" contenteditable="true">
<p id="block-1">I want to prevent this paragraph from delete.</p>
</div>

You could add attribute contenteditable="false" either in html or with JS:
<div class="root" contenteditable="true">
<p id="block-1" contenteditable="false">I want to prevent this paragraph from delete.</p>
<p id="block-2">I do not want to prevent this paragraph from delete.</p>
</div>
or with JS:
let immutableP = document.getElementById('block-1');
immutableP.setAttribute("contenteditable", false);
Here is the link.

Related

How to change height of text area on clicking a button?

I have an automatically expanding text-area. But when clicking send button, text-area is not going back to original height. I have included a sample code. In the project, its implemented using react. Is there any way to make text area height to "50px" when clicking send button? Thank you
var textarea = document.querySelector('textarea');
textarea.addEventListener('keydown', autosize);
function autosize() {
var el = this;
setTimeout(function() {
el.style.cssText = 'height:auto; padding:0';
el.style.cssText = 'height:' + el.scrollHeight + 'px';
}, 0);
}
.textarea {
overflow: hidden;
padding: 10px;
width: 250px;
font-size: 14px;
margin: 50px auto;
display: block;
border-radius: 10px;
border: 6px solid #556677;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid pl-5">
<div class="row w-70 text-center">
<textarea rows='1' placeholder='Auto-Expanding Textarea'></textarea>
</div>
<button class="send-btn" onClick={()=> messageSendHandler()}>send</button>
</div>
</body>
</html>
I don't see the messageSendHandler() function description attached to your post. Does it clear the textarea field? If so, when it happens, the keydown event does not occur, and thus the autosize() function is not triggered. So, I can see these 2 ways to choose from:
if you'd like to run this autosize() function on form submit as well, replace keydown event with input event — it is more universal and can help with different input types (such as dictation),
another option would be to reset the textarea height inside the form submit function (messageSendHandler()), similarly to how you do it here:
el.style.cssText = 'height:' + el.scrollHeight + 'px';
Also, alternatively, maybe this CSS-tricks URL can give you more inspiration on the topic.

Clone on click does not produce new DOM element

I've got this simple JS script what I need to achieve is: every time the button is clicked a clone of the card is appended to container.
const card = document.querySelector('.card').cloneNode(true)
const button = document.querySelector('.btn')
const container = document.querySelector('.container')
button.addEventListener('click', () => {
container.append(card)
})
<div class="container">
<button class="btn">this is a button</button>
<div class="card">
<h1>This is a card</h1>
</div>
</div>
Nothing too hard. The first time I click on button everything work fine.
Why the next time the button doesn't append a new clone?
You are reinserting the same clone over and over again. You need to create a new clone every time the button is clicked.
.container {
background: #ddd;
padding: 1em;
}
.card {
display: inline-block;
width: 5em;
height: 10em;
font-size: 10px;
border: 2px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<button class="btn">this is a button</button>
<div class="card">
<h1>This is a card</h1>
</div>
</div>
</body>
<script>
const button = document.querySelector('.btn')
const container = document.querySelector('.container')
button.addEventListener('click', () => {
const card = document.querySelector('.card').cloneNode(true)
container.append(card);
})
</script>
</html>
You only made one single clone before the click happened. You should make a new clone on each click.
So move the assignment to card inside the click handler:
const button = document.querySelector('.btn');
const container = document.querySelector('.container');
button.addEventListener('click', () => {
const card = document.querySelector('.card').cloneNode(true);
container.append(card);
});
Unrelated, but please terminate your statements with ;. You don't want to rely on the automatic semicolon insertion mechanics, which can sometimes have surprising effects.

Why is the text getting appended to the wrong html element?

Overview: I have an editable div section. Below the div, there is a button which creates a span element, inserts the text "tag" in the span element and finally appends the span element in that editable div
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
#sample-div
{
border-style: solid;
border-width: 1px;
border-color: black;
height:100px;
overflow: auto;
}
</style>
<script type="text/javascript">
function addTags()
{
var tag = document.createElement("span");
tag.className = "tag"
tag.innerHTML = "tag";
$('#sample-div').append(tag);
}
</script>
</head>
<body>
<div id="sample-div" contenteditable="true"></div>
<input type="button" value="date" id="sample-tags" onclick="addTags()">
</body>
</html>
Observation: I click on the button, the span element is added to the div as expected
<div id="sample-div" contenteditable="true">
<span class="tag">tag</span>
</div>
<input type="button" value="date" id="sample-tags" onclick="addTags()">
However, after I start typing inside the div, I noticed the following:
<div id="sample-div" contenteditable="true">
<span class="tag">tag this is a continuation</span>
</div>
My expectation was:
<div id="sample-div" contenteditable="true">
<span class="tag">tag</span> this is a continuation
</div>
So, my question is why the text "this is a continuation" also getting appended inside the span element? How do I achieve the one stated under my expectation?
The easiest solution would be to set the contentEditable attribute of your span to be false:
function addTags() {
var tag = document.createElement("span");
tag.className = "tag"
tag.innerHTML = "tag";
tag.contentEditable = false;
$('#sample-div').append(tag);
}
Side note: since you are using jQuery you don't need to manually create the tag:
function addTags() {
var tag = '<span class="tag" contenteditable="false">tag</span>'
$('#sample-div').append(tag);
}

HTML background box for block of text

Completely new to HTML, I need an html file which does the above:
Some background color for the whole page.
In the center of the page, a block of text within a box of white background color.
Directly under (outside of) the white box, a small line of text at the center of page.
There is probably a better way to do it, but this is my way:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:color here;
}
#example-name {
background-color:white;
}
#example-2 {
text-align:center;
}
</style>
</head>
<body>
<div id='example-name' style="margin: 0 auto">
example content
</div>
<div id='example-2'>
<p>example text</p>
</div>
</body>
<html>
<html>
<body style="background-color:tan">
<p style="margin-left: 30%;margin-right: 30%; background-color: white; padding: 20px 20px 20px 20px;">
Hi.<br>
Thanks for using Mailgun! Please confirm your email address by clicking below!<br>
I hope this answers your question!
</p>
</body>
</html>
Use the css elements margin, background-color, and padding.

Displaying text when link is clicked

This is inside my CSS:
div.hide {
display:none;
}
div.show {
color: #66CCFF;
}
This is in my HTML:
16:10
<script language="JavaScript">
function showText(show,hide)
{
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
</script>
<a name="16:10" onclick="showText('text1')" href="javascript:void(0);"></a>
<div id="text1" class="hide">This is your monitors aspect ratio.</div>
I'm trying to make the first link display the "This is your monitors aspect ratio." text lower on the page.
Any help is much appreciated.
Pure CSS Answer
Ok, if you just want to append text after you have moved to a position in a page using an anchor tag, you could do it with nothing but CSS similar to the following:
a:target:after{
content: " Test";
background-color: #ccffcc;
}
What this does is appends the text "Test" after the active anchor and colors. Here is an example page with implementation:
<!DOCTYPE html>
<html>
<head>
<title>Link Printer 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
a:target:after{
content: " Test";
background-color: #ccffcc;
}
.bigSection{
height: 200px;
}
</style>
</head>
<body>
<div class="bigSection">
<div><a name="first">First</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
<div class="bigSection">
<div><a name="second">Second</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
<div class="bigSection">
<div><a name="third">Third</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
</body>
</html>
Answer using JavaScript
You need to bind an eventListener and prevent it from moving to the next page. Here is a way to do it with JavaScript or CSS. The JavaScript way will actually set the text to whatever you want. The CSS way will hide actually hide the element.
<!DOCTYPE html>
<html>
<head>
<title>Link Printer</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
.hide{
display: none;
}
</style>
<script>
function jsShowText(event) {
var divToManip = document.getElementById("text");
if (divToManip.innerHTML === "") {
divToManip.innerHTML = "Hello";
}
else {
divToManip.innerHTML = "";
}
event.preventDefault();
}
function cssShowText(event) {
var divToManip = document.getElementById("text");
if (divToManip.className === "") {
divToManip.className = "hide";
}
else {
divToManip.className = "";
}
event.preventDefault();
}
function setListeners() {
document.getElementById("jsPrinter").addEventListener("click", jsShowText, false);
document.getElementById("cssPrinter").addEventListener("click", cssShowText, false);
}
window.onload = setListeners;
</script>
</head>
<body>
<div><a id="jsPrinter" href="" onclick="showText();">Click With JavaScript</a></div>
<div><a id="cssPrinter" href="" onclick="showText();">Click With CSS</a></div>
<div id="text">I'm text</div>
</body>
</html>
"showText" must receive an id parameter to be used with the call to "document.getElementById"
Try this, just 1 link that will display the text below after click:
<a name="16:10" onclick="showText('text1')" href="javascript:void(0);">16:10</a>
<script language="JavaScript">
function showText(id)
{
document.getElementById(id).style.display = "block";
}
</script>
<div id="text1" style="display:none;">This is your monitors aspect ratio.</div>
I'm just using style display to hide/show the element. Hope it helps.
just change your css like this:
div.show {
display:block;
color: #66CCFF;
}
Here I am going to provide an example with something that I was working, thank you Alberto Montellano for the example, that gave me an idea, however what was required at the end was something a little different, with the option not to show the data and display it only when I click and make it disappear when click again. In this example I am going to give you two options; you can have a button or a link to trigger the JS function to display and hide the body text, you can choose if you want the button or link that is way I put a comment (optional), both behave as the same, it is up to you which one you want to use.
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<!-- text before the button or link -->
<p>Click the "PIN" button (or link) to display PIN options:</p>
<!-- The Pin button (optional) -->
<button type="button" onclick="myFunction()">PIN button:</button>
<!-- The Pin link (optional) -->
</br></br></br>
<a onclick="myFunction()" href="javascript:void(0);">PIN link:</a>
<!--Data will display or hide (toggle)-->
<div id="myDIV"style="display:none;">
These are the steps to get your PIN number: Bla bla bla.
</div>
<p><b>Note:</b> The text display when you click the button or link will take space, if you click again will be toggle.</p>
<!-- JS -->
<script>
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
</body>
</html>

Categories

Resources