This question already has answers here:
Make part of contentEditable unable to delete
(3 answers)
Closed 3 years ago.
Is it possible to disable deleting an element from contenteditable. I have the following markup and when user presses backspace or delete key if cursor is next to image element I want the image not to be deleted and cursor to move to prev/next char, Using pure JavaScript HTML CSS and not jQuery.
<div id="content" contenteditable="true">
some text and //user can delete this
<img id="img" src="someimg.gif"/> //user can't delete this
more text // user can delete this
</div>
Try to split contenteditable into two parts.
something like this:
<div id="content">
<p contenteditable="true">
some text and
</p>
<img id="img" src="someimg.gif"/>
<p contenteditable="true">
more text
</p>
</div>
Hope this answers your question
just separate them :)
<div id="content" contenteditable="true">
//user can delete this
</p> some text and</p>
</div>
<img id="img" src="someimg.gif"/>
//user can't delete this, also add display
//inline-block to this in the CSS so it doesn't go down
<div id="content" contenteditable="true">
// user can delete this
<p> more text </p>
</div>
Related
My HTML:
<Div Class='POSTS'>
<Div Class='POST'>
<Div Class='CONTENT'>Text1</Div>
</Div>
<Div Class='POST'>
<Div Class='CONTENT'>Text2</Div>
</Div>
<Div Class='POST'>
<Div Class='CONTENT'>Text3</Div>
</Div>
<Div Class='POST'>
<Div Class='CONTENT'>Text4</Div>
</Div>
<Div Class='POST'>
<Div Class='CONTENT'>Text5</Div>
</Div>
<Div Class='POST'>
<Div Class='CONTENT'>Text6</Div>
</Div>
</Div>
And It Continues Without Any Limit...(Never Ending)
With Different Text Inside Each Element With Class Of "CONTENT".
I Searched Over This Website And Found This :
Https://Stackoverflow.Com/Questions/400212/How-Do-I-Copy-To-The-Clipboard-In-Javascript
But In The Project That I'm Working In I Can't Specify Id On Each Element As You Know It's Infinite Number Of These Elements:
<Div Class='POST'>
<Div Class='CONTENT'>some text</Div>
</Div>
So It Needs To Be Automatically Added.
And I Want To :
When User Clicks On The Text Inside Of Element With The Class Of "CONTENT" (No Matter How Long The Text Is And What It Have) , The Entire Text And Tags And ... Be Copied To Clipbored.
I Don't Want To Set Buttons !
I Want To Make The Whole
Tags,Text,And ....
Be Copied On Each One Of Them Without Any Limits!
By Clicking on it's own text.(imagine this as a textarea that user clicks on text inside of it and js copies all of text but this one is div with text inside of it)
If You Think I Missed Sth And It's Not Clear Enough Let Me Know!
Thanks In Advance!
This should solve your problem.
First select the entire object and then get the element which was clicked. Copy the content.
var posts = document.querySelector(".POSTS");
posts
.addEventListener("click", function (e) {
console.log("index", e.target);
navigator.clipboard.writeText(e.target.innerText).then(
function () {
console.log("Async: Copying to clipboard was successful!");
},
function (err) {
console.error("Async: Could not copy text: ", err);
}
);
});
This question already has answers here:
Jquery - Remove only text content from a div
(6 answers)
Closed 4 years ago.
I have
<div class="col-xs-12">
Congratulations! Here is your submitted post.
<p class="post-details">Lorem ipsum</p>
</div>
How can i remove Congratulations! Here is your submitted post. ?
I tried few things like:
$(".post-details").each(function(){
var text = $(".post-details").prev().text().remove();
console.log(text);
});
But it doesn't catch that text.
Also tried this answer but it doesn't work https://stackoverflow.com/a/1571096/1018804
Check this:
https://stackoverflow.com/a/17852238/5089697
It filters the content inside any element and find the correct node you want to remove (in your case the text which is not wrapped in any element but it is a child to the div). Try it.
You could put the text you want to delete inside a div element with an id and remove that div.
Like this:
<div class="col-xs-12">
<div id=“textToRemove”>Congratulations! Here is your submitted post.</div>
<p class="post-details">Lorem ipsum</p>
</div>
Then remove the div with jquery like so:
$("#textToRemove").remove();
here are what you want.
function Delete(){
$('#con').text('');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12">
<p id='con'>
Congratulations! Here is your submitted post.
</p>
<p class post-details>Lorem ipsum</p>
</div>
<button onclick='Delete()'>Delete</button>
I would like to be able to add (append) another set of div's to the section tag below when a user clicks on a button. For example adding the following div's:
<div class="from-me">
<p>this looks great. </p>
</div>
<section>
<div class="from-me">
<p>Hey there! What's up?</p>
</div>
<div class="clear"></div>
<div class="from-them">
<p>Checking out iOS7 you know..</p>
</div>
</section>
What I am trying to create is something similar to a text conversation for an e-learning project. I've had success creating a new div with a javascript function that is run by clicking a button, but I couldn't get it to append inside the section tag. Is this possible or do I need to approach this differently?
Thanks.
-Shawn
I have different requirement for my webpage. For that I need to change the DOM elements. I will have the html from server through AJAX. Html is come from server for different pages is different. Like,
<h1> Some text </h1>
Text out of tags
<div>
<p> Text in div </p>
<img src="some-image.jpg" />
</div>
<p> Some other text </p>
<p> Some other text </p>
<img src="some-image.png" />
Something like that.
When it appears in webpage, It would be like,
Some text Text out of tags
Text in div An Image
Some other text
Some other text
Another Image
So, what I need is, I want to convert the above HTML DOM structure as follows by using Javascript or jQuery.
<p> Some text Text out of tags Text in div</p>
<img src="some-image.jpg" />
<p> Some other text </p>
<p> Some other text </p>
<img src="some-image.png" />
I just want text through <p> tags and images through <img> tags. I don't require remaining all other stuff.
If it is possible, please help me.
Any help would be appreciated.
You can use
$("<selector>").contents().unwrap();
with all the element you want to remove.
For example:
$(document).ready(function() {
$('h1, div, a').contents().unwrap();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> <h1> Some text </h1> </p>
<div> <img src="some-image.jpg" /> </div>
<p> Some other text </p>
<p> Some other text </p>
<img src="some-image.png" />
Similar to this question remove parent element but keep the child element using jquery in HTML
use replaceWith() and return the element you want
You can manipulate/edit the DOM structure received from the server. To hide certain <div> or <p> elements, try following :
document.getElementById("divWithImage").style.display = "none";
^^^^^^
Of course this will hide everything inside, so you should get hold of the inside contents like <img> and inject them again in the DOM at desired location.
I want to divide the content of an element in divs. The delimiter is <hr/> and all open tags should be closed before the closing-div and (if needed) reopened after the reopened div tag. My naive idea was to traverse with jQuery through an elements children, replace all occurrences of <hr/> with </div><div> and close all open tags (up to a certain level) before that. I don't know how to reopen them though.
Example:
<div id="content">
<p>Bla some text
<hr/>
Some more text
</p>
</div>
will become:
<div id="content">
<div>
<p>Bla some text
</p>
</div><div>
<p>Some more text
</p>
</div>
</div>
What I had in mind was to simply visit each tag in their order of appearance, add them to a stack when they open, remove them when they're closed again, if I find a delimiter, close all tags in the stack (but don't remove them), insert the <div/> tag, reopen all tags on the stack in reverse order. continue until end and close all still open tags.
The purpose of this is to chunk a text into predefined parts. It is for a text pagination and the divs are the pages. I want the user to be able to manually specify the break, even inside of ul's, p's and so on.
Any help is appreciated.