I've been contributing to a WYSIWYG text editor that was made using HTML5 and jQuery. While doing some of my research I've been seeing a lot of people use the placeholder attribute in a div. However, this does not follow the specification and I end up with the following error when I try to validate my HTML.
Attribute “placeholder” not allowed on element “div” at this point.
Is there a better way to do this so that my HTML will validate and I still end up with a placeholder?
Thanks to Juantxo Cruz's link I was able to fix my issue by using CSS as shown below:
HTML
<div contentEditable=true data-placeholder="Sample text"></div>
CSS
[contentEditable=true]:empty:not(:focus):before {
content:attr(data-placeholder)
}
Related
I have a content editable div which is my search box. I need to add stack trace in C which has memory addresses surrounded by angular braces. When I insert this text inside the search box, it is being considered as html tags. How should I avoid that ?
An example of the content I am pasting inside the div:
[<ffffffff810733ff>] do_exit+0x15f/0x870
[<ffffffff8109dc25>] ? sched_clock_local+0x25/0x90
[<ffffffff81088792>] ? __dequeue_signal+0x102/0x200
[<ffffffff81073b68>] do_group_exit+0x58/0xd0
The div element after pasting.
<div id="searchBox"
contenteditable="true">do_exit+0x15f/0x870[<ffffffff8109dc25>] ?
sched_clock_local+0x25/0x90[<ffffffff81088792>] ?
__dequeue_signal+0x102/0x200[<ffffffff81073b68>] do_group_exit+0x58/0xd0
</div>
attribute contenteditable + unofficial value "plaintext-only" already answered.
Beside if you copy/paste these, brackets are turned into html entities.
If this is already in your code, then you should treat this on server side.
Anyway here is an extra option, if you still want to use html tag around this bits of code, you may give a try to an old tag <xmp>:
What says W3C about it : https://www.w3.org/wiki/HTML/Elements/xmp ... use at your own appreciation.
<div id="searchBox"
contenteditable="true"><xmp>do_exit+0x15f/0x870[<ffffffff8109dc25>] ?
sched_clock_local+0x25/0x90[<ffffffff81088792>] ?
__dequeue_signal+0x102/0x200[<ffffffff81073b68>] do_group_exit+0x58/0xd0
</xmp></div>
the proper way would be : (use htmlentities() or similar to treat brackets before being send to browser or when saved ).
[contenteditable] {
white-space:pre;
}
<div contenteditable="true">do_exit+0x15f/0x870[<ffffffff8109dc25>] ?
sched_clock_local+0x25/0x90[<ffffffff81088792>] ?
__dequeue_signal+0x102/0x200[ffffffff81073b68>] do_group_exit+0x58/0xd0</div>
Some browsers support contenteditable="plaintext-only", which solves your problem. However, the browsers that don’t support this may not even make the div contenteditable.
Example:
<div contenteditable="plaintext-only"></div>
A better solution to this problem would probably to use a native <input> or <textarea> — those should handle this for you.
I'm recently starting to explore AngularJS, and of course, i know it is ran at the client side, and since SPA (Single Page Applications) are becoming more and more common, i have a question regarding how to safely hide HTML elements.
Let me give a simple example:
Employee
<div ng-show="canSeeSalary">
{{salary}}
</div>
Now, of course, at runtime the div tag related to the salary won't be displayed, however by seeing the HTML source code, or using a developer tool like the one we have in Chrome, it would be possible to see the tag and probably its value.
I know tags like these should be filtered at the the server-side, of course, but since it has come to the client side, the div will be there.
My question is exactly, if there is any way i could hide these divs from the HTML source code, without needing to mix AngularJS with JSTL, for example.
Thanks in advance.
Try ng-if directive:
<div ng-if="canSeeSalary">
{{salary}}
</div>
Corresponding div element will be removed from the DOM. From the official documentation:
The ngIf directive removes or recreates a portion of the DOM tree
based on an {expression}. If the expression assigned to ngIf evaluates
to a false value then the element is removed from the DOM, otherwise a
clone of the element is reinserted into the DOM.
Use
Employee
<div ng-if="canSeeSalary">
{{salary}}
</div>
ng-if completely removes and recreates the element in the DOM rather than changing its visibility via the display css property
I would recommend using ngCloak rather than ngIf.
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
example:
<div ng-cloak> {{::test}} </div>
ngCloak # Official Angular Docs
What is the significance of cmdValue in the input tag in the following:
<input type="button" value="Bold" cmdValue="bold">
This is from <div id="actions"> on a website.
I looked up the input tag on several HTML reference sites and searched for cmdValue in conjunction with the input tag, but could find no data.
That is not a formal HTML attribute for any known tag.
That is certainly a customized attribute added by the developers of that website.
I prefer to forward you to read the answers of this question.
The significance is whatever the CSS or JavaScript code for the page assigns to it. You would need to analyze the page in detail to find this out.
As such, the nonstandard has no effect beyond getting inserted into the DOM as an attribute.
I am using a spark RichText component to render a html text in my Flex Web Application.
The html text that is given to me is with HTML elements with 'style' attribute having all the styles.
For Example:-
<p style="text-align: left;"><b>Hello</b> <i>this is a sample</i>
<font style="color: #ff0000;">HTML text</font></p><p style="text-align: right;">
<u>to be rerndered in FLEX</u></p>
Now, the Flex spark RichText does not show all these styles applied to the text.
However, if I have HTML with inline property attributes (without 'style' attribute) e.g. :-
<font color="#ff0000">Hello</font>
With the above, I get the desired style.
Any pointers/ solution to get around with this, and render the styles will be appreciated.
Thanks,
Mangirish
Try using <span style="color:#FF0000;">HTML text</span> and see if that makes any difference? I'm not too sure how well Flex renders older HTML tags. Besides, <font> is deprecated anyway.
If your css is fix, you can use StyleSheet Object
Here is a tutorial : http://learnola.com/2008/12/03/actionscript-3-tutorial-using-html-and-css/
If you need more information, just ask it in comments.
Short answer, TLF won't support that kind of styles that I know of, but you can always try to convert it to see what happens:
var textflow:TextFlow = TextConverter.importToFlow(yourHTMLString, TextConverter.TEXT_FIELD_HTML_FORMAT);
However, I have a sneaking suspicion that it won't convert the style properly and probably just ignore it altogether. The only solution I can think of is
Have a custom way to parse the html and get the style out and set it on the textflow or
Have the 'server' html be fixed to be compatible with the flex TLF (inline styles)
I would personally prefer the second option since it's easier to implement on the client.
Below is some html I found in this jquery tooltip tutorial, the contents inside of content"" show up in the tooltip using javascript. I have never seen the content propert befre, I search on W3schools.com but and google but could not find anything about it. Is this a valid property?
Image Tooltip
sorry If I am overlooking this, I searched but just briefly, didn't look too much before asking this.
If you need to put custom attributes into an element, then use the html5 data- attributes.
Shamelessly copied from John Resig:
<li class="user" data-name="John Resig" data-city="Boston"
data-lang="js" data-food="Bacon">
<b>John says:</b> <span>Hello, how are you?</span>
</li>
This is most likely a custom attribute that the jQuery tooltip creators made up to hold the text for the tooltip. This is unfortunately a common practice with many jQuery plugins (although most put stuff like this in the rel="" attribute instead).
The downside of this is that if you are concerned with validatiing your HTML, this will cause that to fail.
The upside is that browsers will ignore attributes that they do not expect, so it will not affect the rendering of the page.
The proper place for this would be the title="" attribute, but without the extra HTML markup in the value (<span> in this case).
If you must have the extra markup, be sure to encode it:
title=">span<Image Title</span>"
But, be aware that if the Javascript fails, the user will see this encoded text as the built-in, browser-rendered tooltip.
Based on my initial searches on w3c, it seems that there is not such attribute "content" for a tag. The "content" attribute is for meta tag only. For tooltips you would use the "title" attribute. Also, I don't think html is allowed in a title attribute.
Image Tooltip
The content attribute doesn't exist. For tooltips you can use the title attribute (which works on alot of tags).
I thinks some browsers also use the alt attribute for tooltips on img tags, but this isn't the intended purpose of alt.