Change backgroundcolor of text in textarea
1
I want to change the backgroundcolor of the text in a textarea.
NOT the background color of the textarea. The background of each character.
Like selecting the text.
I want to see the spaces at the end of each line. Or a single line without text and only spaces. The color should appear even on typing new text.
If possible I don't want to use javascript. Only CSS.
It should look like this:
. This one is selected text. I want it to see it without selecting.
javascript html css
edited Nov 14 '18 at 14:39
Abhi
2,55342451
asked Nov 14 '18 at 14:37
GurkenglasGurkenglas
132
add a comment |
1
I want to change the backgroundcolor of the text in a textarea.
NOT the background color of the textarea. The background of each character.
Like selecting the text.
I want to see the spaces at the end of each line. Or a single line without text and only spaces. The color should appear even on typing new text.
If possible I don't want to use javascript. Only CSS.
It should look like this:. This one is selected text. I want it to see it without selecting.
javascript html css
edited Nov 14 '18 at 14:39
Abhi
2,55342451
asked Nov 14 '18 at 14:37
GurkenglasGurkenglas
132
2
It is impossible to set the background color just for the text in thetextareatag. The screenshot you've provided is most likely an overlay like adivwith an attributecontenteditable, which takes value from the actualtextarea.
– nikitahl
Nov 14 '18 at 14:58
add a comment |
1
1
1
I want to change the backgroundcolor of the text in a textarea.
NOT the background color of the textarea. The background of each character.
Like selecting the text.
I want to see the spaces at the end of each line. Or a single line without text and only spaces. The color should appear even on typing new text.
If possible I don't want to use javascript. Only CSS.
It should look like this:. This one is selected text. I want it to see it without selecting.
javascript html css
edited Nov 14 '18 at 14:39
Abhi
2,55342451
asked Nov 14 '18 at 14:37
GurkenglasGurkenglas
132
I want to change the backgroundcolor of the text in a textarea.
NOT the background color of the textarea. The background of each character.
Like selecting the text.
I want to see the spaces at the end of each line. Or a single line without text and only spaces. The color should appear even on typing new text.
If possible I don't want to use javascript. Only CSS.
It should look like this:. This one is selected text. I want it to see it without selecting.
javascript html css
javascript html css
edited Nov 14 '18 at 14:39
Abhi
2,55342451
asked Nov 14 '18 at 14:37
GurkenglasGurkenglas
132
edited Nov 14 '18 at 14:39
Abhi
2,55342451
asked Nov 14 '18 at 14:37
GurkenglasGurkenglas
132
edited Nov 14 '18 at 14:39
Abhi
2,55342451
edited Nov 14 '18 at 14:39
Abhi
2,55342451
edited Nov 14 '18 at 14:39
Abhi
2,55342451
2,55342451
asked Nov 14 '18 at 14:37
GurkenglasGurkenglas
132
asked Nov 14 '18 at 14:37
GurkenglasGurkenglas
132
asked Nov 14 '18 at 14:37
GurkenglasGurkenglas
132
132
2
It is impossible to set the background color just for the text in thetextareatag. The screenshot you've provided is most likely an overlay like adivwith an attributecontenteditable, which takes value from the actualtextarea.
– nikitahl
Nov 14 '18 at 14:58
add a comment |
2
It is impossible to set the background color just for the text in thetextareatag. The screenshot you've provided is most likely an overlay like adivwith an attributecontenteditable, which takes value from the actualtextarea.
– nikitahl
Nov 14 '18 at 14:58
2
2
It is impossible to set the background color just for the text in the
textarea tag. The screenshot you've provided is most likely an overlay like a div with an attribute contenteditable, which takes value from the actual textarea.– nikitahl
Nov 14 '18 at 14:58
It is impossible to set the background color just for the text in the
textarea tag. The screenshot you've provided is most likely an overlay like a div with an attribute contenteditable, which takes value from the actual textarea.– nikitahl
Nov 14 '18 at 14:58
add a comment |
1 Answer
1
active
oldest
votes
0
You need to use javascript for highlighting text in textarea.
const bgcolor = "#3297FD";
const textarea = document.getElementById("textarea");
const bgtext = document.getElementById("highlight");
function highlight()
bgtext.innerHTML = "";
let val = textarea.value;
let len = val.length;
for (let i = 0; i < len; i++)
if (val[i] == "n")
bgtext.innerHTML += "<br />";
else
bgtext.innerHTML += "<span style="background-color: [[bgcolor]];"> </span>".replace("[[bgcolor]]", bgcolor);
setInterval(highlight, 0);.text
position: fixed;
top: 20px;
left: 20px;
width: 300px;
height: 300px;
background-color: transparent;
margin: 0px;
font-size: 14px;
font-family: monospace;
white-space: pre;
color: white;
<style>
.text
position: fixed;
top: 20px;
left: 20px;
width: 600px;
height: 600px;
background-color: transparent;
margin: 0px;
font-size: 14px;
font-family: monospace;
white-space: pre;
color: white;
</style>
<p id="highlight" class="text"></p>
<textarea id="textarea" class="text" style="left:17px; top:18px;"></textarea>answered Nov 14 '18 at 16:03
Tabin1000Tabin1000
938
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53302678%2fchange-backgroundcolor-of-text-in-textarea%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You need to use javascript for highlighting text in textarea.
const bgcolor = "#3297FD";
const textarea = document.getElementById("textarea");
const bgtext = document.getElementById("highlight");
function highlight()
bgtext.innerHTML = "";
let val = textarea.value;
let len = val.length;
for (let i = 0; i < len; i++)
if (val[i] == "n")
bgtext.innerHTML += "<br />";
else
bgtext.innerHTML += "<span style="background-color: [[bgcolor]];"> </span>".replace("[[bgcolor]]", bgcolor);
setInterval(highlight, 0);.text
position: fixed;
top: 20px;
left: 20px;
width: 300px;
height: 300px;
background-color: transparent;
margin: 0px;
font-size: 14px;
font-family: monospace;
white-space: pre;
color: white;
<style>
.text
position: fixed;
top: 20px;
left: 20px;
width: 600px;
height: 600px;
background-color: transparent;
margin: 0px;
font-size: 14px;
font-family: monospace;
white-space: pre;
color: white;
</style>
<p id="highlight" class="text"></p>
<textarea id="textarea" class="text" style="left:17px; top:18px;"></textarea>answered Nov 14 '18 at 16:03
Tabin1000Tabin1000
938
add a comment |
0
You need to use javascript for highlighting text in textarea.
const bgcolor = "#3297FD";
const textarea = document.getElementById("textarea");
const bgtext = document.getElementById("highlight");
function highlight()
bgtext.innerHTML = "";
let val = textarea.value;
let len = val.length;
for (let i = 0; i < len; i++)
if (val[i] == "n")
bgtext.innerHTML += "<br />";
else
bgtext.innerHTML += "<span style="background-color: [[bgcolor]];"> </span>".replace("[[bgcolor]]", bgcolor);
setInterval(highlight, 0);.text
position: fixed;
top: 20px;
left: 20px;
width: 300px;
height: 300px;
background-color: transparent;
margin: 0px;
font-size: 14px;
font-family: monospace;
white-space: pre;
color: white;
<style>
.text
position: fixed;
top: 20px;
left: 20px;
width: 600px;
height: 600px;
background-color: transparent;
margin: 0px;
font-size: 14px;
font-family: monospace;
white-space: pre;
color: white;
</style>
<p id="highlight" class="text"></p>
<textarea id="textarea" class="text" style="left:17px; top:18px;"></textarea>answered Nov 14 '18 at 16:03
Tabin1000Tabin1000
938
add a comment |
0
0
0
You need to use javascript for highlighting text in textarea.
const bgcolor = "#3297FD";
const textarea = document.getElementById("textarea");
const bgtext = document.getElementById("highlight");
function highlight()
bgtext.innerHTML = "";
let val = textarea.value;
let len = val.length;
for (let i = 0; i < len; i++)
if (val[i] == "n")
bgtext.innerHTML += "<br />";
else
bgtext.innerHTML += "<span style="background-color: [[bgcolor]];"> </span>".replace("[[bgcolor]]", bgcolor);
setInterval(highlight, 0);.text
position: fixed;
top: 20px;
left: 20px;
width: 300px;
height: 300px;
background-color: transparent;
margin: 0px;
font-size: 14px;
font-family: monospace;
white-space: pre;
color: white;
<style>
.text
position: fixed;
top: 20px;
left: 20px;
width: 600px;
height: 600px;
background-color: transparent;
margin: 0px;
font-size: 14px;
font-family: monospace;
white-space: pre;
color: white;
</style>
<p id="highlight" class="text"></p>
<textarea id="textarea" class="text" style="left:17px; top:18px;"></textarea>answered Nov 14 '18 at 16:03
Tabin1000Tabin1000
938
You need to use javascript for highlighting text in textarea.
const bgcolor = "#3297FD";
const textarea = document.getElementById("textarea");
const bgtext = document.getElementById("highlight");
function highlight()
bgtext.innerHTML = "";
let val = textarea.value;
let len = val.length;
for (let i = 0; i < len; i++)
if (val[i] == "n")
bgtext.innerHTML += "<br />";
else
bgtext.innerHTML += "<span style="background-color: [[bgcolor]];"> </span>".replace("[[bgcolor]]", bgcolor);
setInterval(highlight, 0);.text
position: fixed;
top: 20px;
left: 20px;
width: 300px;
height: 300px;
background-color: transparent;
margin: 0px;
font-size: 14px;
font-family: monospace;
white-space: pre;
color: white;
<style>
.text
position: fixed;
top: 20px;
left: 20px;
width: 600px;
height: 600px;
background-color: transparent;
margin: 0px;
font-size: 14px;
font-family: monospace;
white-space: pre;
color: white;
</style>
<p id="highlight" class="text"></p>
<textarea id="textarea" class="text" style="left:17px; top:18px;"></textarea>const bgcolor = "#3297FD";
const textarea = document.getElementById("textarea");
const bgtext = document.getElementById("highlight");
function highlight()
bgtext.innerHTML = "";
let val = textarea.value;
let len = val.length;
for (let i = 0; i < len; i++)
if (val[i] == "n")
bgtext.innerHTML += "<br />";
else
bgtext.innerHTML += "<span style="background-color: [[bgcolor]];"> </span>".replace("[[bgcolor]]", bgcolor);
setInterval(highlight, 0);.text
position: fixed;
top: 20px;
left: 20px;
width: 300px;
height: 300px;
background-color: transparent;
margin: 0px;
font-size: 14px;
font-family: monospace;
white-space: pre;
color: white;
<style>
.text
position: fixed;
top: 20px;
left: 20px;
width: 600px;
height: 600px;
background-color: transparent;
margin: 0px;
font-size: 14px;
font-family: monospace;
white-space: pre;
color: white;
</style>
<p id="highlight" class="text"></p>
<textarea id="textarea" class="text" style="left:17px; top:18px;"></textarea>const bgcolor = "#3297FD";
const textarea = document.getElementById("textarea");
const bgtext = document.getElementById("highlight");
function highlight()
bgtext.innerHTML = "";
let val = textarea.value;
let len = val.length;
for (let i = 0; i < len; i++)
if (val[i] == "n")
bgtext.innerHTML += "<br />";
else
bgtext.innerHTML += "<span style="background-color: [[bgcolor]];"> </span>".replace("[[bgcolor]]", bgcolor);
setInterval(highlight, 0);.text
position: fixed;
top: 20px;
left: 20px;
width: 300px;
height: 300px;
background-color: transparent;
margin: 0px;
font-size: 14px;
font-family: monospace;
white-space: pre;
color: white;
<style>
.text
position: fixed;
top: 20px;
left: 20px;
width: 600px;
height: 600px;
background-color: transparent;
margin: 0px;
font-size: 14px;
font-family: monospace;
white-space: pre;
color: white;
</style>
<p id="highlight" class="text"></p>
<textarea id="textarea" class="text" style="left:17px; top:18px;"></textarea>answered Nov 14 '18 at 16:03
Tabin1000Tabin1000
938
answered Nov 14 '18 at 16:03
Tabin1000Tabin1000
938
answered Nov 14 '18 at 16:03
Tabin1000Tabin1000
938
answered Nov 14 '18 at 16:03
Tabin1000Tabin1000
938
938
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53302678%2fchange-backgroundcolor-of-text-in-textarea%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
It is impossible to set the background color just for the text in the
textareatag. The screenshot you've provided is most likely an overlay like adivwith an attributecontenteditable, which takes value from the actualtextarea.– nikitahl
Nov 14 '18 at 14:58