How would you make HTML text appear disabled? - javascript

I have a div containing a span (the span could be a paragraph, too; I don't care):
<div id="aDiv">
<span id="aQuestion">What's next?</span>
</div>
I would like to be able to toggle the span's text's appearance between disabled and enabled. I've tried stuff along the lines of
document.getElementById('aQuestion').setAttribute("disabled", "disabled");
but haven't had any luck: The text doesn't have that grayed-out "disabled" look. When I inspect the element, I can see the attribute has been added. In fact, even if my original code looks like this:
<div id="aDiv">
<span id="aQuestion" disabled>What's next?</span>
</div>
the text doesn't appear disabled.
It seems I'm going down the wrong path, but online searches haven't resulted in a solution. Is there any way to accomplish this? I realize the concept of text being disabled doesn't exactly make sense, since they don't involve user interaction, but I need that look.
The only thing I've come up with is to use CSS, something along these lines:
CSS:
<style type="text/css">
.disableMe {
color:darkgrey;
}
</style>
The HTML:
<span id="aQuestion" class="disableMe">What's next?</span>
The JS:
document.getElementById('aSpan').classList.remove('disableMe');
This kind of gets me around the problem with the text, but some of my text spans will have adjacent spans containing bootstrap icons, and I need these to appear disabled, as well. Am I overlooking something very obvious?
Thanks in advance.

It's a span element so it doesn't have a disabled modifier, just create a css class that gives the look you want and use that.

span includes only the global attributes. So you cannot disable it. More here

Related

How to style a text string that is added by using a JavaScript function?

The link below is supposed to reveal more text when clicked, which it does, however the text uses all default styling, which cannot be seen on my black background that I use for the page. I have tried to style the tag where the text is added through JavaScript, but the added text still uses the default style.
Below is the code I have used:
HTML:
<p>
This movie might seem boring to you at first and you
might not get it after <br>first time viewing, like I did. But this
is one of the greatest movies ever made.....
Read More
<p id="atext" class="atext">dqdas</p>
<script src="Home.js"></script>
</p>
and JavaScript:
function more(e) {
e.preventDefault();
document.getElementById("atext").style.color= "white";
document.getElementById("atext").outerHTML = 'It touches many issues in our lives and packs a hell of a plot twist';
}
Simply use innerText rather then outerHTML. This should solve the issue.
I believe this happens because setting the HTML of an element overwrites any styles it may have. Setting the text does not do this.
Also, it is generally best to use innerText when necessary, as it reduces the risk of errors like yours occurring.

Only allow certain tags in contenteditable div

I have a contenteditable div and using keyboard shortcuts like ctrl+i the user is able to format the text. And as they type the innerHTML changes reflecting the tags i.e:
Hello <i>thanks for <br><br>for showing up<b> y'all b</b></i>
This is fine, and works well for my purposes. but the issue arises that when I go to print the html in a different div IF a user adds any other html tags, they could really mess up the application.
For instance, if they added a <script> tag or style etc.. How do I make it that the user is only allowed to add <i>, <br>, <b>, <s>, and without being able to add anything else?
Any ideas? Thank you
I think that you can use a regExpresion to avoid the "indeseables" tags. Some like
<textarea #data [(ngModel)]="value" (input)="replace(data)"></textarea>
<div [innerHtml]="valueParse">
</div>
replace(control:any)
{
this.valueParse=control.value.replace(/<(?!br|i|u)((\w+))>/gm,"&lt$1&gt")
.replace(/<\/(?!br|i|u)((\w+))>/gm,'&lt\/$1&gt');
}
See stackblitz

HTML: Can you hide/ignore text elements from browser Find (CTRL+F)

I've got a web app with a fairly complicated UI, and a portion of the screen reserved for content.
If possible, I would like to make it so that when the user uses the browser's built-in text searching (CTRL+F), any text in the UI is ignored and only the actual content is searched.
Is this doable? CSS and JavaScript are acceptable
(I realize I could probably render the text to a <canvas> but it isn't worth the effort there)
You could inject your UI text using the CSS content property. Generated text like this is not searchable since it is part of the document style rather than the content.
For example:
If you have a button in your UI such as <button id="dosomething"></button> you could add some non-searchable text inside it using the following CSS:
#dosomething:before {
content: "Click Me";
}
I've created a fiddle to demonstrate how this works: http://jsfiddle.net/3xENz/ Note that it even works with <a> tags.
I recommend you stick with the :before selector because it works in IE8, while the :after selector does not.
If you have a more complex UI element, you can also add another element inside of it to hold the text content. For example:
<div id="complexcontrol"><div class="text"></div></div>
with the following CSS:
#complexcontrol .text:before {
content: "Click Me";
}
Since screen readers probably won't process these styles properly you will still have the same accessibility problems as you would have with images, but it would be much easier to maintain and also allows a more responsive design.
To expand on nullability's answer: You can also store the text in a data attribute like that:
.css-text [data-content]:before {
content: attr(data-content);
}
<div class="css-text">
Hello, <span data-content="World"></span>!
</div>
Cf. https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes#CSS_Access
My suggestion would be to make the area you don't want to be searchable an image or have it use something like flash. The only solution I was able to find was this. But using that is completely up to you.

Is there a way to make a non-editable span?

I am using a content editable div as an editor for real-time collaboration purposes. I need to paint carets/cursors for each user on the client side. I am doing this by adding and removing a span on each event like keypress and click.
<span id="caret1" style="fontSize:18px color:red">|</span>
How can I make this span non-editable? So that when a user leaves his caret at a constant position and another user edits something in this same position, he can't delete this caret by backspace or select it and edit it as if it was text.
EDIT:
<span id="caret1" style="fontSize:18px color:red" contenteditable=false>|</span>
Doesn't let users write in the span at least but the users are still able to delete this span by backspace.
Couple of things
1) Your source code isn't formatted right. Too many double quotes.
"fontSize:18px" color:red"
2) The other thing is I haven't seen contentEditable as a true style, i've seen in action working more like a pseudoclass (being referenced in CSS files) or attribute to html tags, not as a style itself.
<span id="caret1" contentEditable="true" style="">
3) If neither of those work, you could try a javascript/jquery approach where deleting or backspacing to a point where there'd be two cursors on top of each other. you could add both ID's to the same span.
`<span id="caret1 caret2" style="fontSize:18px" contenteditable:"false" color:"red">|</span> `
and when caret2 does something different, move out of caret1, and create a new for caret2...
To do that, you could use a little scripting (and maybe use something like rangyInputs), and identify if the selected text has another caret in it... and also use a bit of that .on('keypress') to do validation on delete/backspace...

How can I make textarea content possible to styling or set div behaviour like textarea behaviour?

I want to create a very simple html editor (not WYSIWYG) based on jQuery.
My question is how can I make textarea or div possible to
write some text on it
then style i.e tags ( <strong>some stuff</strong> change <strong> color to blue for example)
I don't ask how to use regular expression and how to manipulate DOM later becouse it's my own problem to solve :D Just how to make "playgroud" for it ;)
When I use textarea it's hmm ( impossible? ) to style stuff inside, but also when I use div... hmm I can just write on div :D So how can I link textarea behaviour on div?
EDIT Here is something similar : http://codemirror.net/mode/xml/index.html
Check out this quick fiddle to show how you could do this possibly.
$('#edit').keydown(function(){
var text = $(this).val();
$('#preview').html(text);
});
this is your html
<textarea id="edit">
</textarea>
<div id="preview"></div>
and your css
#preview{ width:100%; background-color:#eee; padding:20px}
#preview strong{color:blue;}

Categories

Resources