We Keep Coding

Angular Editable Text

I'm writing a code where a user clicks a button on the screen, the user can see a paragraph. I want that paragraph to be editable. For example, the user should be able to write additional stuff in it. There was a readonly part in my code and I removed it, but it is still not editable. How can I achieve this?
HTML Code:
<div class="content fuse-white ml-24 mr-8 h-100-p" fusePerfectScrollbar>
<div class="label-list">
<p>
Label Info:
<span>
{{_stickerData?.StickerData}}
</span>
</p>
</div>
</div>

In HTML, as outlined from this link:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content
You have to set the
contenteditable
attribute on the paragraph element to make it editable.
Bind the paragraph attribute with Boolean value so that when you click the button, set the Boolean to True which will trigger the content to be editable.

Change your Span Tag to Texttera.
app.component.html:
<textarea>{{_stickerData?.StickerData}}</texttera>
app.component.ts:
_stickerData.StickerData: string = "Text in the Input Field"

How to type and delete text in a pre-span-wrapped text in conteteditable div while keeping the span tag

Does anyone know how to insert and delete text in a pre-span-wrapped text in content-editable div while keeping the <span id="x"> tag?
In the content-editable div, if delete "kachu", <span id="2"> would also be deleted. I want that specific tag still there even without text.<span id="2></span>
In the content-editable div, if typing in "pi" just before "kachu" to make "pikachu", <span id="2"> would not wrap "pi". I want <span id="2">pikachu</span>
HTML
<div id="inputbox" style="border:1px solid lightgrey" contenteditable="true">
<span id="1">love</span> <span id="1">kachu</span>
</div>

This will change the content of the span containing 'kachu' to an empty string, but finding the span after that will be slightly difficult, since it has the same id as the other span.
$('#inputbox').find('span:contains("kachu")').html( '' );
Once "kachu" is deleted, to find the empty span you could just do the same, but change the contains("kachu") to contains("")
You should consider using different ids for your spans. If you did intend the 2nd span to have id="2", this could be: $('#inputbox').find('#2').html( '' ) or just $('#2').html( '' )

How do I delete the next two siblings and ONLY the next two siblings in this pop-up using jQuery?

So I have a popup. You click on an "+Add Text" link and it adds a text box to the page, along with another "+Add Text link" and an "x" in a span on the right corner of each textbox. When I click an "x" within this popup, I'd like for it to delete the two siblings that immediately follow it. The HTML generated on the page looks something like this...
<div class="popup">
<div class="delete-text-box-x">X</div>
<textarea class="textbox"></textarea>
<span class="add-textbox">+Add text</span>
<div class="delete-text-box-x">X</div>
<textarea class="textbox"></textarea>
<span class="add-textbox">+Add text</span>
<div class="delete-text-box-x">X</div>
<textarea class="textbox"></textarea>
<span class="add-textbox">+Add text</span>
</div>
When I click the divs with the class "delete-text-box-x">, I'd like for the following two siblings to be deleted. That is, the following corresponding textarea and "+Add Text" span.
I almost have it. Here is my jQuery
$('.delete-text-box-x').click(_.bind(function(e){
$('.delete-text-box-x').nextUntil('.add-textbox').remove();
}, this));
}
It's obvious why this doesn't work. The nextUntil method does indeed select and remove the textboxes following the 'X' divs. But the selector selects EVERY 'X' on the page, and therefore deletes EVERY textbox on the page. It also doesn't delete the '+Add Textbox' spans...
So how do I get more specific than the current selector I'm using? So it selects ONLY the specific 'X' I click, rather than every 'X' on the page.

Firstly, you need to base the selector on the element that raised the event using the this keyword. From there you can use nextUntil(), but you should use the selector of the next X so that all the required elements are found. Finally you need to use add() to include the clicked X itself. Try this:
$('.delete-text-box-x').click(function (e) {
$(this).nextUntil('.delete-text-box-x').add(this).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup">
<div class="delete-text-box-x">X</div>
<textarea class="textbox"></textarea>
<span class="add-textbox">+Add text</span>
<div class="delete-text-box-x">X</div>
<textarea class="textbox"></textarea>
<span class="add-textbox">+Add text</span>
<div class="delete-text-box-x">X</div>
<textarea class="textbox"></textarea>
<span class="add-textbox">+Add text</span>
</div>
I also note you're using some odd syntax around the anonymous function in the click handler which I presume this is due to another library. If not you should remove it.

This until works to find another element in the siblings, so in the above code you are selecting the next add-textbox and not the next X icon.
$('.delete-text-box-x').click(function() {
$(this).nextUntil('.delete-text-box-x')add(this).remove();
});

want to show or hide section of html page when it loads be default based on text box check option on top of the page

I have an html where I have bunch of text controlled by a show hide button, (say this code snippet is para). Now I would like to add additional layer of control on top of that. I would like to have a text box on top of the html page when it loads to have a option to hide or show para by default based on check uncheck of the text box.
Here is my code para
print $indexfd
qq~<div id="div_$var3">\n~, # Add a div around the $key-elements
qq~<input onclick="showit('$var3')" type="button" id="btn_show_$var3" value="showit">\n~,
qq~<input onclick="hideit('$var3')" type="button" id="btn_show_$var3" value="hideit"><br/>\n~,
qq~<ol id="$var3" style="display: none"><li><b>$var3->{name} \: $var3->{value}</b></li></ol>\n~,
qq~</div>\n~;

This isn't something Perl can do for you. You will need to do it in JavaScript. Have a look at the jQuery lib's function toggle(). That should do what you want. Add your paragraph and add some sort of button or whatever. Then add a click-handler to that button to toggle the paragraph.
Here's an excerpt from the documentation:
We can animate any element, such as a simple image:
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
We will cause .toggle() to be called when another element is clicked:
$('#clickme').click(function() {
$('#book').toggle('slow', function() {
// Animation complete.
});
});
Don't forget to load the jQuery files in the <head> section of your HTML document.

Hide div when page is clicked, unless specific div was clicked

When the user clicks on topic_tag_sug or any of its child elements, that div should not hide. But when the user clicks on any other element, topic_tag_sug should hide.
HTML
<input id='topic_tag' onblur="$('#topic_tag_sug').hide();"/>
<div id='topic_tag_sug' style='border:1px solid #000'>here is tag suggestion zone, i want to click here to select tag suggestion, and it will not be hide</div>​
JavaScript
$('#topic_tag').focus();
http://jsfiddle.net/Q7hFw/2/

I am amusing that you want to hide the suggestion box on some other event. Let's add one close button inside the box itself,
<input id='topic_tag' />
<div id='topic_tag_sug' style='border:1px solid #000;display:none;'>
here is tag suggestion zone, i want to click here to select tag suggestion, and it will not be hide
<br>
<a id="close" href="#">X: Close</a>
</div>
Now add some javaScript code using jQuery
$(document).ready(function() {
$('#topic_tag').bind('click', function() {
$('#topic_tag_sug').show();
});
$('#close').bind('click', function() {
$('#topic_tag_sug').hide();
});
});
Please find working example here