JavaScript apply style to content editable text - javascript

Hello I have the following code which applies a bold effect to some selected text:
richTextField.document.execCommand('Bold',false,null);
This works but what I want to do now is to be able to change the font size. If i just use:
var strUser2 = e2.options[e2.selectedIndex].value;
richTextField.document.execCommand('fontSize',false,strUser2);
it dosnt work because <font size="1/2/3/4/5/6/7"> has been removed in HTML 5. Is there a way that I could apply the style font-size:30px; to the selected text or apply a class name to the selected text ONLY that would have CSS in it? Thanks.

I don't see a way (withe execCommand) to get to a specific size, but there appears to be an increaseFontSize command that you can invoke, so:
richTextField.document.execCommand('increaseFontSize',false,strUser2);

Related

How to make user input unaffected by span elements color style

I have some words in a content editable <div> that needs to be a different color from the rest of the text. The problem is that I don't want the user to be able to use the different color style and they should still be able to delete the blue word.
<div id="textarea" contenteditable>Hello world<span style="color: blue">!</span>
</div>
Is it possible for the users' input to be unaffected by the color style?
Instead of making the entire DIV editable, break it into separate spans, so you can specify the individual editability.
<div id="textarea"><span contenteditable>Hello world</span><span style="color: blue">!</span>
</div>
You haven't really provided enough for us to go on - eg. what are the rules which determine what is blue and what is not? Is the blue text always an exclamation mark? Does it always come at the end?
What it sounds like you will need is to build a simple lightweight code editor and apply the rules you desire. The way this works is you create a transparent editable div in the same space as a "display" div. The content of the editable textarea is invisible and the contents of the "display" div are visible. For every key stroke, you take the content of the editable textarea and write it to the "display" div and apply any custom rules. Here's a simple fiddle showing what I mean:
https://jsfiddle.net/ymdrfupb/1/
const editable = document.querySelector('.editor > [contenteditable]');
const display = document.querySelector('.editor > .display');
function setDisplayContent(text) {
// wrap any non-alphanumeric trailing characters with a blue span
display.innerHTML = text.replace(/([^\w]+)$/, '<span class="blue">$1</span>');
}
editable.addEventListener('input', (ev) => {
setDisplayContent(ev.target.innerHTML);
});
setDisplayContent(editable.innerHTML);

Style text inside an HTML textarea

My problem is that I have textarea and want to find a specified string and mark all of its occurences (something similar to what regex101.com does with regex matches).
This leads me to a more general question (see my question title) and I would like to learn if the following can be applied to parts of text inside a textarea:
change font color
change background color
change font style (bold, italic)
change font size
Should I use something which already exists (like codemirror)?
I would also appreciate it if someone could explain the idea behind this (for example regex101.com has a textarea but also uses some span elements to highlight the matches)
Have you tried doing something like:
var textArea = document.getElementById("textArea");
textArea.style.color = 'Red';
textArea.style.backgroundColor = 'Black';

add style's to the textarea 's specific line

I have html textarea dynamically it's content changing line by line. I want to add some styles to the updated or modified line content. Is there any windows selection, like properties, to do it??
What I want is make user feel, that the change has happen. Or any other way to achieve it?
There is no simple way to achieve it just by CSS with textarea, but the problem is solvable for sure :)
you can replace textarea with <div contenteditable><p></p></div>
you can set textarea CSS: background: transparent and manipulate some element below the textarea
you can modify this jQuery plugin: https://github.com/cotenoni/jquery-linedtextarea to manipulate specific lines (some CSS work required, cause by default you can manipulate just left column)
you can set custom background for textarea and move it up and down to specific line by background-position: 0 X

CSS: text-background:hide-other-text;

Is it possible to have multiple texts over each other and yet only one of them readable/visible, without setting the background-color of the text container of the desired readable one ?
I dream about something like:
text-background: hide-other-text;
more info:
I need the background color of the elements behind the text, and text "below" needs to go up to the text on top.
You could use jQuery to hide the one piece of text, and add the other piece of text, if you so desired. That might be much simpler in this case.

mouseover on text html

In my javascript file there is,
var htm = '<div style="overflow:hidden;height:24px;width:150px;" onmouseover="tooltip(this)">' ;
function tooltip(sp)
{
sp.title = sp.innerHTML;
}
So on mouse over a text the tooltip is displayed.But the tool tip does not stay longer. meaning the position is not fixed.
Can the code be modified such that mouse over should be done on the text and the tool tip also........
If all you want is a "built-in" tooltip, there's no need at all to do it dynamically. Just code the HTML element with a "title" attribute containing the text you want. The browser will show the tooltip on mouseover. If you want something fancier, you should probably look at a jQuery add-on (or some other framework).
Here is a standards based tooltip that will serve you well.
<div title="This is your tooltip">Some Text</div>
If you then wish to add on top of this, you can use the title attribute to get the text you want to display as a tooltip, which is how various tooltip plugins work.

Categories