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"
Related
I have some problems with a contenteditable div annoying behaviour. I have a few elements inside, let's say the code looks like that:
<div contenteditable="true">
<p id="element-id-1">element-id-1</p>
<p id="element-id-2">element-id-2</p>
</div>
All works as intended except for one thing - when I triple click the first paragraph to select and remove it (with delete or backspace) the second paragraph content 'jumps' into its place, but retains the first paragraph ID. Is there a way to prevent this, so after I triple click the first paragraph and remove it, the second paragraph remains with the same ID (#element-id-2)? JSFiddle with described functionality here: https://jsfiddle.net/t8e28bmx/ Thanks!
Try this code.
<div contenteditable="plaintext-only">
<p id="element-id-1">element-id-1</p>
<p id="element-id-2">element-id-2</p>
</div>
Reference: https://w3c.github.io/editing/contentEditable.html#h-contenteditable
<div>
<p contenteditable="true" id="element-id-1">element-id-1</p>
<p contenteditable="true" id="element-id-2">element-id-2</p>
</div>
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( '' )
I'm unable to mouse over text for a hyperlink I created
input type="button" class="headermenubutton userLink" id="admin" name="admin" value="Administration" title="Administration" onclick="onBtnAdmin()"
span title="Administration" class="linkSeparator" style="padding-left: 0px"
I added title="Administration" in span still doesn't seem to work
OnBtnAdmin is a button
The question is a bit ambiguous but as title suggests,you want mouse over text for a hyper link.This will work in your jsp.
<span title="I am hovering over the link text">link text</span>
The text which you will keep inside span tag will show mouse over text set by title property.
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();
});
I havent used Javascript in a while and I have almost forgotten it all but I would like to be reminded how to show and hide html div boxs to display hidden content by clicking on a text or such.
In this case I would like to have a hidden box filled with login information while the ahref link will be the indicator to tell the loginbox to appear or disappear and by knowing this I could easily apply it to the register area.
I would like to know how to do this or a pop up box sort of thing.
This is what I have so far:
Could anyone help me with this now. I can't seem to get it work.
The toggle is
Login
Showing content
<div class="signup" style="display: none;">
<p> test </p>
</div>
Javascript is
function showStuff(signup) {
document.getElementById('signup').style.display = 'block';
}
Why won't this work
Looks like the issue with your code is that your div has a class as 'signup' not an id.
try:
<div id="signup" style="display: none;">
<p> test </p>
</div>
See this jsfiddle for a working example with an additional fix to how your function works.
http://jsfiddle.net/aUQ6B/
Original Answer:
See: javascript hide/show element
Code to make note of is the following:
document.getElementById('myid').style.display
Setting this to 'none' hides the element.
Setting it to 'block, 'inline' or whatever the original value was will show the element.