Textbox Div Contenteditable Primer Tutorial
We have an idea for use for the following componentry …
- div contenteditable=true … only hosting …
- input type=text value=” placeholder=[Some Instructive Blurb] readonly
… initially like …
<div onblur=docss(this.innerText); data-style='border: 1px solid blue;' id=mydiv contenteditable=true onclick="if (this,innerText.length == 0) { this.innerHTML=''; this.focus(); this.style.border='1px solid blue'; }"><input style='border: 1px solid transparent;width:100%;' type=text placeholder='/* CSS styling can go here via a click ... eg. background-color: yellow; */' value='' readonly></input></div>
… and respond to a click and scrutiny of [divElement].innerText attribute (blank when empty or just containing that input type=text element) to decide when to bring on the contenteditable=true way to glean some content from the user.
Then we started thinking about the elements above and any accompanying Javascript and saw that we could make an external Javascript (divceditin.js) tool out of this …
// divceditin.js
// Help out divceditin.html dynamic style definition
// RJM Programming - December, 2022
var todoccwith=location.search.split('tod' + 'owith=')[1] ? decodeURIComponent(location.search.split('tod' + 'owith=')[1].split('&')[0]) : (document.head.innerHTML.split('tod' + 'owith=').length <= 1) ? "*" : decodeURIComponent(document.head.innerHTML.split('tod' + 'owith=')[1].split('&')[0].split('"')[0].split("'")[0].split("#")[0].split(">")[0]);
var afyourster=location.search.split('af' + 'ter=')[1] ? decodeURIComponent(location.search.split('af' + 'ter=')[1].split('&')[0]) : (document.head.innerHTML.split('af' + 'ter=').length <= 1) ? "" : decodeURIComponent(document.head.innerHTML.split('af' + 'ter=')[1].split('&')[0].split('"')[0].split("'")[0].split("#")[0].split(">")[0]);
var beyoursfore=location.search.split('bef' + 'ore=')[1] ? decodeURIComponent(location.search.split('bef' + 'ore=')[1].split('&')[0]) : (document.head.innerHTML.split('bef' + 'ore=').length <= 1) ? "" : decodeURIComponent(document.head.innerHTML.split('bef' + 'ore=')[1].split('&')[0].split('"')[0].split("'")[0].split("#")[0].split(">")[0]);
var blyoursurb=location.search.split('bl' + 'urb=')[1] ? decodeURIComponent(location.search.split('bl' + 'urb=')[1].split('&')[0]) : (document.head.innerHTML.split('bl' + 'urb=').length <= 1) ? "/* CSS styling can go here via a click ... eg. border-radius: 50%; */" : decodeURIComponent(document.head.innerHTML.split('bl' + 'urb=')[1].split('&')[0].split('"')[0].split("'")[0].split("#")[0].split(">")[0]);
var blyoururb=blyoursurb;
if (blyoursurb.indexOf(' */') != -1 && blyoursurb.indexOf(' eg. ') != -1) {
blyoururb=blyoursurb.replace(' */', ' } */').replace(' eg. ', ' eg. ' + ('' + todoccwith) + ' { ');
}
function supdocss() {
docss('');
}
if (typeof docss !== "function") {
function docss(txt) {
var documentcbody=document.body;
var sparecc='';
if (afyourster.trim() != '') {
if (document.getElementById(afyourster.trim())) {
documentcbody=document.getElementById(afyourster.trim().replace('#',''));
} else {
afyourster='';
}
}
if (beyoursfore.trim() != '') {
if (document.getElementById(beyoursfore.trim())) {
documentcbody=document.getElementById(beyoursfore.trim().replace('#',''));
} else {
beyoursfore='';
}
}
if (todoccwith.trim() != '') {
if (document.getElementById(todoccwith.trim().replace('#','')) && todoccwith.indexOf('#') == -1) {
blyoururb=blyoururb.replace(' eg. ' + ('' + todoccwith) + ' { ', ' eg. #' + ('' + todoccwith) + ' { ');
todoccwith=location.search.split('tod' + 'owith=')[1] ? ('#' + decodeURIComponent(location.search.split('tod' + 'owith=')[1].split('&')[0])) : (document.head.innerHTML.split('tod' + 'owith=').length <= 1) ? "*" : ('#' + decodeURIComponent(document.head.innerHTML.split('tod' + 'owith=')[1].split('&')[0].split('"')[0].split("'")[0].split("#")[0].split(">")[0]));
}
}
if (!document.getElementById('dstyle') && !document.getElementById('mydiv')) {
if (todoccwith.replace('*','') == '') {
if (beyoursfore.trim() != '') {
sparecc=documentcbody.innerHTML;
documentcbody.innerHTML="<div onblur=docss(this.innerText); data-style='border: 1px solid blue;' id=mydiv contenteditable=true onclick=\"if (this,innerText.length == 0) { this.innerHTML=''; this.focus(); this.style.border='1px solid blue'; }\"><input style='border: 1px solid transparent;width:100%;' type=text placeholder='" + blyoursurb + "' value='' readonly></input></div>" + sparecc;
} else {
documentcbody.innerHTML+="<div onblur=docss(this.innerText); data-style='border: 1px solid blue;' id=mydiv contenteditable=true onclick=\"if (this,innerText.length == 0) { this.innerHTML=''; this.focus(); this.style.border='1px solid blue'; }\"><input style='border: 1px solid transparent;width:100%;' type=text placeholder='" + blyoursurb + "' value='' readonly></input></div>";
}
document.body.innerHTML+="<div id=dstyle style=display:none;></div>";
} else {
if (beyoursfore.trim() != '') {
sparecc=documentcbody.innerHTML;
documentcbody.innerHTML="<div onblur=docss(this.innerText); data-style='border: 1px solid blue;' id=mydiv contenteditable=true onclick=\"if (this,innerText.length == 0) { this.innerHTML=''; this.focus(); this.style.border='1px solid blue'; }\"><input style='border: 1px solid transparent;width:100%;' type=text placeholder='" + blyoururb + "' value='' readonly></input></div><div id=dstyle style=display:none;></div>" + sparecc;
} else {
documentcbody.innerHTML+="<div onblur=docss(this.innerText); data-style='border: 1px solid blue;' id=mydiv contenteditable=true onclick=\"if (this,innerText.length == 0) { this.innerHTML=''; this.focus(); this.style.border='1px solid blue'; }\"><input style='border: 1px solid transparent;width:100%;' type=text placeholder='" + blyoururb + "' value='' readonly></input></div><div id=dstyle style=display:none;></div>";
}
}
} else if (!document.getElementById('mystyle')) {
document.body.innerHTML+="<div id=dstyle style=display:none;></div>";
}
if (txt.trim() != '') {
if (txt.trim().indexOf('{') == -1) {
document.getElementById('dstyle').innerHTML+=(' <style> ' + todoccwith + ' { ') + txt.replace('<style>','').replace('</style>','') + ' } </style> ';
} else {
document.getElementById('dstyle').innerHTML+=' <style> ' + txt.replace('<style>','').replace('</style>','') + ' </style> ';
}
}
};
}
function btaf() {
if (document.body.outerHTML.split('>')[0].indexOf('doc' + 'ss(') == -1) {
setTimeout(supdocss, 2000);
}
}
setTimeout(btaf, 500);
… because what we can use this for is to service the content for dynamic CSS appending to a webpage to make it dynamic looking, as with our divceditin.html sample user of the external Javascript above, in a web application, or you using below …
Stop Press
Yesterday’s CSS Gradient Creations Conic Tutorial‘s integration of the day before CSS Conic Gradient Primer Tutorial‘s work was missing some of the features of that latter web application, involving its textarea flexibility to add user additional dynamic CSS into the mix. No problems any longer, as we make use of the work of today, above, integrating into CSS Gradient Creations Conic Tutorial‘s web application one new line of code …
<script 'type=text/javascript' src='/divceditin.js?todowith=tdlook&after=tdcss&blurb=%2F*%20More%20gradient%20CSS%20styling%20can%20go%20here%20via%20a%20click%20...%20eg.%20border-radius%3A%2050%25%3B%20%20*%2F'></script>
… to offer that possibility.
If this was interesting you may be interested in this too.
