I am trying to make a textarea content editable and I am failing. I am using this code:
<textarea id='' class='' name='notes' rows='12' cols='67' contenteditable='true' ></textarea>
I am expecting a result like http://html5demos.com/contenteditable
Does anyone have an idea why it's not working?
Edit:
I am doing this because I am trying to do a oneliner to add a control to a form in which (HTML) formatted content can be pasted and retain its formatting. I am trying to do this without fuss and without javascript code. It appears this is not possible. I will close this question in a day if no further input to the contrary is added.
Have you set the right doctype at the top of your page? For HTML5 you need the following doctype:
<!DOCTYPE html>
Also, why a textarea? textareas are already editable.
They are not using a textarea, textareas are already editable. This is what they are using
<section contenteditable="true" id="editable">
<h2>Go ahead, edit away!</h2>
<p>Here's a typical paragraph element</p>
<ol>
<li>and now a list</li>
<li>with only</li>
<li>three items</li>
</ol>
</section>
I don't mean to repeat anything, but I've put together a demo that shows what is happening.
http://gist.github.com/210327
Just run that, edit what you wish and click the 'Output Formatted Content' statement to receive an alert message with an output of the actual html-formatted content in the contenteditable element. As for adding formatting, etc, you'll need to make buttons that call a text-modifying function on whatever is highlighted. Yeah, that part will be fun.
Nonetheless, I hope this helps.
Given your comment responses, I would recommend any of the excellent WYSIWYG editors out there. No need to re-invent the wheel, and I don't think contenteditable wouldn't have met your needs anyway.
My personal favorite is CKEditor, but there are many, many others. TinyMCE is also very popular.
Related
When I set focus on the body tag, Windows narrator reads the text in tag. How can I prevent this from happening?
I've tried aria-hidden="true", role="presentation", tabindex="-1". None of these are working.
Appears to be an Internet Explorer bug and not a Narrator bug because I hear the same problem using NVDA with IE. I used the jsfiddle example in the SO thread that #LukeT mentioned. I don't know if that sample code is similar to yours. Perhaps you can post your code.
From the SO thread, the code was (with minor changes):
<div tabindex="0" id="page-wrapper" role="region" aria-labelledby="title1">
<h2 id="title1">page 1</h2>
<ul>
<li tabindex="-1" style="display:none" presentation" aria-hidden="true">alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</div>
If I clicked or tabbed to the <div>, I would hear alpha even though it has every attribute possible to make it hidden. I could get around the problem with various changes but since I don't know what your code looks like, I don't know which one you need.
Here's what fixed the problem (any of the following - you don't need to do them all):
Changed the aria-labelledby on the <div> to aria-label with a literal string (<div ... aria-label="page 1">). That means it has duplicate text as the <h2>, but it worked.
Removed the role from the <div>
Added an aria-label to the <h2>, which is weird because it just duplicates what's already embedded in the <h2>.
If you post your code, perhaps we can find something that can work for your case.
I found this thread on the topic. Obviously you have tried the above mentioned solutions, but there is an additional comment below that may help you, dealing with explicit labeling. Also, further down in the discussion, it mentions that Microsoft Edge assists in this matter as well.
Hope this helps!
What I am trying to do:
I am attempting to create a web page with Angular2 which shows HTML on the screen in much the same way many websites do such as stackoverflow, css-tricks, and and w3schools (to name a few). I would like to be able to copy the code and paste it somewhere else after its shown on screen.
What I know:
I have come to realize that it will probably be necessary to convert all of my opening tags ( i.e., < ) to < and to convert all of my closing tags ( i.e., > ) to >, however I am still not sure what the best way to interpolate some variables into the template.
For example, I have this in my template file:
<div>{{myTitle}}</div>
<div><p>{{mySubTitle}}</p></div>
<div>
<ul>
<li>{{item1}}</li>
<li>{{item2}}</li>
<li>{{item3}}</li>
</ul>
</div>
What I want to see (and be able to copy) in the browser:
<div>This is my title</div>
<div><p>This is my subtitle</p></div>
<div>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Durian</li>
</ul>
</div>
Stack overflow makes this really easy and nice to accomplish by letting you highlight the code you want to display on screen and clicking the {} button in the editor. However, when I try using the <pre> and <code> tags in my Angular2 app, I do not get the same result, I cannot see the actual HTML elements like <div> and <li>.
Instead what I see is:
{{myTitle}}
{{mySubTitle}}
{{item1}}
{{item2}}
{{item3}}
I have used handlebarsjs in the past and am familiar with that library but I was under the impression that using Angular2 would eliminate the need for handlebarsjs. Does anyone know how to accomplish what I am trying to do in Angular2 without handlebarsjs?
For < and > you'll probably need to use < and >.
For the braces in template expressions you may want to use ngNonBindable directive.
<div ngNonBindable> {{myTitle}} </div>
Use <pre> or <code> for HTML to become rendered verbatim.
<pre ngNonBindable>
<div>{{'{{'}}myTitle{{'}}'}}</div>
<div><p>{{'{{'}}mySubTitle{{'{{'}}</p></div>
<div>
<ul>
<li>{{'{{'}}item1{{'{{'}}</li>
<li>{{'{{'}}item2{{'{{'}}</li>
<li>{{'{{'}}item3{{'{{'}}</li>
</ul>
</div>
</pre>
You need to escape { and } (for example like shown above)
How do you write <p></p> so that it can be displayed as text in an HTML page, rather than be interpreted as HTML (which would give an empty paragraph).
If you want to show the in the view,
Because, when you type that inside html element, it may be getting it as the html element itself.
if your purpose is showing that in the view just try this.
<p> </p>
Check this snippet :
<p> </p>
you can do it with using span
<span> < </span> <span>p</span> > <span> < </span> / <span>p</span><span> > </span>
or you can do below like this
<p> </p>
A P tag should print out text on your site no matter what. However, on most occasions you will need to refresh (F5) your page in order for it to take effect. Furthermore, if you got anything on your site that could be covering it up, try removing it just to see whether another element is "eating it up" or not. For example, try removing a banner image if thats something you got, or a navbar.
Usage for P, just in case:
<p> Text goes here </p>
Use Html entities to display the reserved html symbol
HTML Entities
this is what you mean? sorry if i understand wrongly but your description is very short.
View the source of this page. It managed it!
<p><\p>
and the answer was <p><\p>
hi i am new to html and do not know any php or javascript. I have a simple html webpage with a picture in the middle. I want it so that when you click the picture text appears describing what the picture is but without going to a new webpage. is this possible to do on just html without using javascript or php and if so how is it done? thanks
It's possible to do something similar with the details and summary HTML5 elements.
See this Fiddle (Works only in Chrome/Safari/Opera)
<details>
<summary><img src="image-source"> Click here for more information</summary>
<p>more information</p>
</details>
Due to the lack of browser support, I would not recommend using them. See caniuse.com - summary
You could also use the HTML title tag. The text you wanted to appear would show up on mouseOver on all browsers.
<img src="xxxxxx" title="This is the title" />
Check out on Fiddle
I need to store some hidden HTML for each li element. What's the best way to do this?
I've tried storing it as data on each li element but the hidden HTML tags screw up the li element.
I've managed to do it by storing the data in a hidden text area for each li.
Is this the best way to do it? Or is there a better way.
I'm storing around 200 chars.
Put your hidden HTML in a div / span with a CSS class that has:
display: none;
See the display property.
You can put a hidden field at each li to put the data! I think that hidden fields will work well, and theres no limit for the amount of data.
<input type="hidden" id="myId" value="value here pls..." />
Hopes this help you!
<input type="hidden" value="your hidden stuff here" />
Is your data HTML or is it content? Do you need it for programatic reasons? If it's just a matter of hiding content, as you would for a screen reader when using image-swap, for example, use css:
#my_content {
text-indent: -9999px;
}
Beyond that you could use hidden form fields, or simply use CSS to hide the element entirely.
try this
<div style="display:none;">your html here.....</div>
One way I've recently learned to do this is to use <script> tags. You can add an ID to the script tag, and reference in javascript using that ID to fetch the content and do something with it. I use this for inline templates.
http://www.bennadel.com/blog/2411-Using-Underscore-js-Templates-To-Render-HTML-Partials.htm
<script id="foo" type="text/template">
<p>your text here</p>
</script>
now in real javascript:
<script type="text/javascript">
<!-- assume jquery for the sake of assuming something -->
$(function() {
fooTemplate = $("#foo").clone();
$("#target").append(fooTemplate);
});
</script>
I created a fiddle, but I had to use a div in the HTML area because fiddle doesn't like having an extra script node... The principle is the same -- just change to script in your html in your page.
If your <li> are children of an <ol> element and values you want to store are integers, then you can store them as
<li value="11">DISPLAY ITEM</li>
another approach:
if you want your extra HTML DATA to be present, but you don't want to render it at all (i assume this because you said that you tried to hide them inside a textarea -and thats why im posting this answer) then why not just put it inside comments?
<li> your code....
<!--
<div>my hidden html code of this li, of course i won't have nested comments in here!!!</div>
-->
</li>
Of course this is tricky, and not easy to get this data, but if you need this just for debug it will be ok.
Otherwise i'm in favor of display:none in a wrapped div.
Captain Obvious.
Here are two methods not mentioned in other answers.
The advantage of both methods is that, when you're working in your HTML programming environment, you get normal syntax coloring and error-checking.
Method 1
<template>
<div>Here's my hidden HTML.</div>
</template>
Method 2
<span hidden>
<div>Here's my hidden HTML.</div>
</span>