{"id":57721,"date":"2022-12-10T03:01:04","date_gmt":"2022-12-09T17:01:04","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=57721"},"modified":"2022-12-09T08:41:59","modified_gmt":"2022-12-08T22:41:59","slug":"textbox-div-contenteditable-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/textbox-div-contenteditable-primer-tutorial\/","title":{"rendered":"Textbox Div Contenteditable Primer Tutorial"},"content":{"rendered":"
\"Textbox<\/a>

Textbox Div Contenteditable Primer Tutorial<\/p><\/div>\n

We have an idea for use for the following componentry …<\/p>\n

    \n
  1. div contenteditable<\/a>=true … only<\/font> hosting …<\/li>\n
  2. input type=text value=” placeholder<\/a>=[Some Instructive Blurb] readonly<\/li>\n<\/ol>\n

    … initially like …<\/p>\n


    \n<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>
    \n<\/code><\/p>\n

    … and respond to a click and scrutiny of [divElement].innerText<\/a> 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.<\/p>\n

    Then we started thinking about the elements above and any accompanying Javascript and saw that we could make an external Javascript (divceditin.js<\/a>) tool out of this …<\/p>\n


    \n\/\/ divceditin.js
    \n\/\/ Help out divceditin.html dynamic style definition
    \n\/\/ RJM Programming - December, 2022
    \n
    \n 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]);
    \n 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]);
    \n 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]);
    \n 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]);
    \n var blyoururb=blyoursurb;
    \n if (blyoursurb.indexOf(' *\/') != -1 && blyoursurb.indexOf(' eg. ') != -1) {
    \n blyoururb=blyoursurb.replace(' *\/', ' } *\/').replace(' eg. ', ' eg. ' + ('' + todoccwith) + ' { ');
    \n }
    \n
    \n function supdocss() {
    \n docss('');
    \n }
    \n
    \n if (typeof docss !== \"function\") {
    \n function docss(txt) {
    \n var documentcbody=document.body;
    \n var sparecc='';
    \n if (afyourster.trim() != '') {
    \n if (document.getElementById(afyourster.trim())) {
    \n documentcbody=document.getElementById(afyourster.trim().replace('#',''));
    \n } else {
    \n afyourster='';
    \n }
    \n }
    \n if (beyoursfore.trim() != '') {
    \n if (document.getElementById(beyoursfore.trim())) {
    \n documentcbody=document.getElementById(beyoursfore.trim().replace('#',''));
    \n } else {
    \n beyoursfore='';
    \n }
    \n }
    \n if (todoccwith.trim() != '') {
    \n if (document.getElementById(todoccwith.trim().replace('#','')) && todoccwith.indexOf('#') == -1) {
    \n blyoururb=blyoururb.replace(' eg. ' + ('' + todoccwith) + ' { ', ' eg. #' + ('' + todoccwith) + ' { ');
    \n 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]));
    \n }
    \n }
    \n if (!document.getElementById('dstyle') && !document.getElementById('mydiv')) {
    \n if (todoccwith.replace('*','') == '') {
    \n if (beyoursfore.trim() != '') {
    \n sparecc=documentcbody.innerHTML;
    \n 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;
    \n } else {
    \n 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>\";
    \n }
    \n document.body.innerHTML+=\"<div id=dstyle style=display:none;><\/div>\";
    \n } else {
    \n if (beyoursfore.trim() != '') {
    \n sparecc=documentcbody.innerHTML;
    \n 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;
    \n } else {
    \n 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>\";
    \n }
    \n }
    \n } else if (!document.getElementById('mystyle')) {
    \n document.body.innerHTML+=\"<div id=dstyle style=display:none;><\/div>\";
    \n }
    \n if (txt.trim() != '') {
    \n if (txt.trim().indexOf('{') == -1) {
    \n document.getElementById('dstyle').innerHTML+=(' <style> ' + todoccwith + ' { ') + txt.replace('<style>','').replace('<\/style>','') + ' } <\/style> ';
    \n } else {
    \n document.getElementById('dstyle').innerHTML+=' <style> ' + txt.replace('<style>','').replace('<\/style>','') + ' <\/style> ';
    \n }
    \n }
    \n };
    \n }
    \n
    \n function btaf() {
    \n if (document.body.outerHTML.split('>')[0].indexOf('doc' + 'ss(') == -1) {
    \n setTimeout(supdocss, 2000);
    \n }
    \n }
    \n
    \n setTimeout(btaf, 500);
    \n<\/code><\/p>\n

    … 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<\/a> sample user of the external Javascript above, in a web application<\/a>, or you using below …<\/p>\n