I have a editor using HTML 5 tag contenteditable, there i'm using span inside contenteditable, when i remove all text then span also removed but i want span should not be removed, how to prevent it?
My Code:--
$('#editor').keyup(function(){
$('#spanText').text($(this).find('span').text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable="true" id="editor"><span>This is my text</span></div>
<br><br><hr>
<div id="spanText"></div>
I think there is no straightforward way to achieve that.
You can check the text length of the element to restore the element back.
Demo:
$('#editor').keyup(function(){
if(!$(this).text().length){
$(this).html('<span> </span>');
}
$('#spanText').text($(this).find('span').text().trim());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div contenteditable="true" id="editor"><span>This is my text</span></div>
</div>
<hr>
<div id="spanText"></div>
Move the contenteditable property to the span
<div>
<span contenteditable="true" id="editor">This is my text</span>
</div>
Related
I'm trying to figure out how to target a section of characters from some generated HTML.
The output I have is:
<div class="entry-content">
[embed]https://www.youtube.com/watch?v=y545JdKuHOs[/embed] This is some other copy.
</div>
The desired output is:
<div class="entry-content">
<span class="hide">
[embed]https://www.youtube.com/watch?v=y545JdKuHOs[/embed]
</span> This is some other copy.
</div>
My goal is to wrap the [embed] tags in a <span class="hide"></span> that I can target via CSS. There are multiple instances of this HTML with different links inside the [embed][/embed] so I will most likely need to find a way to wrap the entire code into a span.
I was looking into .wrap(), but with no avail.you.
To achieve this you can use the html() method with a regular expression which pulls out the [embed]*[/embed] pattern and wraps it in a <span>. Try this:
$('.entry-content').html(function(i, html) {
return html.replace(/(\[embed\].+\[\/embed\])/gi, '<span class="hide">$1</span>');
});
.hide { background-color: yellow; } /* just for demo purposes */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry-content">
[embed]https://www.youtube.com/watch?v=y545JdKuHOs[/embed] This is some other copy.
</div>
<div class="entry-content">
[embed]https://www.youtube.com/watch?v=dK45JuOsy5H[/embed] This is some other copy.
</div>
I have an HTML code and I want to replace something by JavaScript.
<div class="maindiv">
<div class="childdiv">
Old Text
</div>
</div>
Now I want to change "Old Text" to another like "New Text".
Please let me know if it is possible.
You have to locate your element element inside the DOM , it would be better to use class or/and id propreties.
But in case if you are not allowed to edit the DOM you have to find a way to find the required element like crossing parents that do have an id or a class.
Get first element with this class childdiv.
Get first a tag inside the above found element .
Set innerHTML for the found element to the required value exp: New Text.
Javascript (as you asked for)
<div class="maindiv">
<div class="childdiv">
Old Text
</div>
</div>
<script>
document.getElementsByClassName("childdiv")[0].getElementsByTagName('a')[0].innerHTML="New Text";
</script>
Jquery (same logic as above)
$(document).ready(function(){
$(".childdiv a").text("New Text");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="maindiv">
<div class="childdiv">
Old Text
</div>
</div>
You simply use document.getElementById("my-link").innerHTML = "New Text", but you should put an id attribute to your <a> tag like so:
<a id="my-link" href="www.abc.com" rel="prev">
^^^^^^^^^^^^
Or, if you don't want to edit anything on your original HTML (bad practice):
document.getElementsByTagName("a")[0].innerHTML = "New Text";
You can access such DOM object by using
document.getElementsByClassName("childdiv")[0].childNodes[1].textContent="Updated Text";
I don't really understand your issue but I have tried this and it's working...
<div class="maindiv">
<div class="childdiv">
Old Text
</div>
</div>
and jQuery
$(".link").click(function(e){
e.preventDefault();
$(this).text("New Text");
});
https://jsfiddle.net/294m3my6/
If you want JavaScript
<div class="maindiv">
<div class="childdiv">
Old Text
</div>
</div>
And JS
function Action(evt) {
evt.preventDefault();
document.getElementById("link").innerHTML = "Next Text";
}
document.getElementById('link').addEventListener(
'click', Action, false
);
https://jsfiddle.net/ep3v5u0k/
#Amani has solve my problem. It is what I wanted.
<div class="maindiv">
<div class="childdiv">
Old Text
</div>
</div>
<script>
document.getElementsByClassName("childdiv")[0].getElementsByTagName('a') [0].innerHTML="New Text";
Thanks you so much all of you specially Amani.
I have a small problem that i cannot solve.I have this : <p>Text<span></span></p> and i want to change only the text of the <p>.Which means, when i click on an change-Button, the text based on an input field should replace the text.
What i have tried is something like this : $("p").text("newText") but this will also remove the <span>.
So how can i only change the text and not the inner html...
With your HTML above you can do
$('p').contents().first()[0].textContent='newText';
The idea is to take advantage of the fact that contents() includes text-nodes. Then, access by index [0] to get the native javascript DOM element and set the textContent
$('p').contents().first()[0].textContent = 'newText';
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<p>Text<span>inside span</span>
</p>
Put another span inside of the p tag and only change its contents:
<p>
<span id="theText">Text</span>
<span></span>
</p>
And then:
$('#theText').text('newText');
$('#theText').text('newText')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<span id="theText"></span>
<span>some other span</span>
</p>
I have this webpage. Here is the raw HTML page.
<body>
<p>GBN: <div id="output"></div>KH/s</p>
</body>
My problem is that the words are on different lines. How would I make it so that the worlds 'GBN:', '0' and 'KH/s' appear all on the same line?
Instead of using a <div id="output"> you could use <span id="output"> which is inherently inline.
Alternatively you could style the <div> with #output { display: inline-block;}.
Use <span> instead of <div>
Use a span instead of a div
<body>
<p>GBN: <span id="output"></span>KH/s</p>
</body>
Given the following html for a type of blog post editor:
<div class="entry">
<div class="title" contenteditable="true">
<h2>Title goes here</h2>
</div>
<div class="content" contenteditable="true">
<p>content goes here</p>
</div>
</div>
I'm trying to use jquery to select the .title and .content divs to attach unique event handlers to each.
$('[contenteditable]').on(...);
works for both but
$('[contenteditable] .title').on(...);
or
$('.title').attr('contenteditable', 'true').on(...);
both don't work to select the specific contenteditable block.
You could use the attribute selector in CSS .title[contenteditable="true"].
jsFiddle example
.title[contenteditable="true"] {
background: red;
}
In jQuery: $('.title[contenteditable]').css("background","red")
jsFiddle example
For the first example you have to remove the space between the attribute selector and the class selector, as a space implies descendance.
$('[contenteditable].title').on("click", function(){
$(this).css('color', 'orange');
});
Example: http://jsfiddle.net/2Bsk4/