{"id":62123,"date":"2023-12-30T03:01:55","date_gmt":"2023-12-29T17:01:55","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=62123"},"modified":"2023-12-31T15:30:37","modified_gmt":"2023-12-31T05:30:37","slug":"starts-with-textarea-css-styling-mobile-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/starts-with-textarea-css-styling-mobile-tutorial\/","title":{"rendered":"Starts With Textarea CSS Styling Mobile Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/value_starts_with.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Starts With Textarea CSS Styling Mobile Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/value_starts_with_mobile.jpg\" title=\"Starts With Textarea CSS Styling Mobile Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Starts With Textarea CSS Styling Mobile Tutorial<\/p><\/div>\n<p>Because yesterday&#8217;s <a title='Starts With Textarea CSS Styling Tutorial' href='#swtcssst'>Starts With Textarea CSS Styling Tutorial<\/a>&#8216;s &#8220;Starts With Textarea&#8221; web application involved logic with so much &#8230;<\/p>\n<ul>\n<li>HTML element focus &#8230;<\/li>\n<li>Javascript keyboard event logic<\/li>\n<\/ul>\n<p> &#8230; dependencies, we were not overly surprised testing it on mobile (iOS) platforms, that we encountered issues.<\/p>\n<p>The weirdest symptom of issues, where to solve, we started involving a colourful but semi-transparent <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay' title='Overlay tutorials here'>overlaying<\/a> HTML div element, was the absence of an iOS mobile platform Virtual Keyboard on occasions, even with a user delivered click to the HTML textarea element we are decorating with a background colour triggered by a change of &#8220;starts with&#8221; value.  We must have not satisfied those iOS and Android requirements that programmatic click logic is often not enough to make things happen the way they do on non-mobile platforms.  We get around some of that by now involving, for mobile platforms &#8230;<\/p>\n<ul>\n<li>an HTML form method=GET action=[sameHTML]<\/li>\n<li>form input type=submit button initially transparent but shown when needed &#8230; which is when &#8230;<\/li>\n<li>we detect disappearance of the Virtual Keyboard &#8230;<br \/>\n<code><br \/>\n var acknowledge='';<br \/>\n <br \/>\n if ('visualViewport' in window) { \/\/ thanks to <a target=_blank title='https:\/\/stackoverflow.com\/questions\/47841986\/detecting-the-opening-or-closing-of-a-virtual-keyboard-on-a-touchscreen-device' href='https:\/\/stackoverflow.com\/questions\/47841986\/detecting-the-opening-or-closing-of-a-virtual-keyboard-on-a-touchscreen-device'>https:\/\/stackoverflow.com\/questions\/47841986\/detecting-the-opening-or-closing-of-a-virtual-keyboard-on-a-touchscreen-device<\/a><br \/>\n  const VIEWPORT_VS_CLIENT_HEIGHT_RATIO = 0.75;<br \/>\n  window.visualViewport.addEventListener('resize', function (event) {<br \/>\n    if (<br \/>\n      (event.target.height * event.target.scale) \/ window.screen.height &lt;<br \/>\n      VIEWPORT_VS_CLIENT_HEIGHT_RATIO<br \/>\n    ) {<br \/>\n    acknowledge='s';   \/\/document.title=('shown');<br \/>\n    } else {<br \/>\n    if (acknowledge == 's') { document.getElementById('iaway').style.opacity='1.0'; }<br \/>\n    acknowledge='h';  \/\/document.title=('hidden');<br \/>\n    }<br \/>\n  });<br \/>\n }<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; giving the user the chance to break that nexus by clicking that &#8220;Keyboard&#8221; button to regain proper <sub>re<\/sub>focus possibilities to that HTML textarea element in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/value_starts_with.html-GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/value_starts_with.html-GETME\">value_starts_with.html<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/value_starts_with.html\">Textarea Value Starting With<\/a> web application.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/starts-with-textarea-css-styling-mobile-tutorial\/'>Starts With Textarea CSS Styling Mobile Tutorial<\/a>.<\/p-->\n<hr>\n<p id='swtcssst'>Previous relevant <a target=_blank title='Starts With Textarea CSS Styling Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/starts-with-textarea-css-styling-tutorial\/'>Starts With Textarea CSS Styling Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/value_starts_with.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Starts With Textarea CSS Styling Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/value_starts_with.jpg\" title=\"Starts With Textarea CSS Styling Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Starts With Textarea CSS Styling Tutorial<\/p><\/div>\n<p>The other day when we presented <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/phpjavascript-decoding-scrambled-words-game-css-tutorial\/' title='PHP\/Javascript Decoding Scrambled Words Game CSS Tutorial'>PHP\/Javascript Decoding Scrambled Words Game CSS Tutorial<\/a> there were two CSS selector &#8220;starts with&#8221; scenarios referenced &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/phpjavascript-decoding-scrambled-words-game-css-tutorial\/'><p>\n&lt;style&gt;<br \/>\n<code><br \/>\n.guess* { width: 40px; }    \/\/ thanks to <a target=_blank title='https:\/\/stackoverflow.com\/questions\/13352080\/match-all-elements-having-class-name-starting-with-a-specific-string' href='https:\/\/stackoverflow.com\/questions\/13352080\/match-all-elements-having-class-name-starting-with-a-specific-string'>https:\/\/stackoverflow.com\/questions\/13352080\/match-all-elements-having-class-name-starting-with-a-specific-string<\/a><br \/>\n<\/code><br \/>\n&lt;\/style&gt;<br \/>\n<\/p>\n<p> &#8230; let alone what was used (ie. select element name attribute &#8220;starts with&#8221; ^ syntax) and opens up interesting possibilities too &#8230;<\/p>\n<p>\n&lt;style&gt;<br \/>\n<code><br \/>\n select[name^='guess'] { width: 40px; }  \/\/ <a target=_blank title='https:\/\/stackoverflow.com\/questions\/41832255\/css-class-name-selector-name-starts-with' href='https:\/\/stackoverflow.com\/questions\/41832255\/css-class-name-selector-name-starts-with'>https:\/\/stackoverflow.com\/questions\/41832255\/css-class-name-selector-name-starts-with<\/a><br \/>\n<\/code><br \/>\n&lt;\/style&gt;\n<\/p><\/blockquote>\n<p>Is there such a selector as &#8230;<\/p>\n<p><code><br \/>\n textarea[value^='text at the start'] { background-color: yellow; }<br \/>\n<\/code><\/p>\n<p>?  Alas, no.  But there is &#8230;<\/p>\n<p><code><br \/>\n textarea[title^='text at the start'] { background-color: yellow; }<br \/>\n<\/code><\/p>\n<p> &#8230; associated with the static initial HTML &#8230;<\/p>\n<p><code><br \/>\n&lt;textarea title='' cols=80 rows=20 onkeydown='return tuttifrutti(event);' onkeypress='return unwell(this);' onchange=well(this); onblur=well(this); id=myta&gt;&lt;\/textarea&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; possible, and there are HTML textarea event elements which might help &#8230;<\/p>\n<ul>\n<li>onblur<\/li>\n<li>onchange<\/li>\n<li>onkeypress<\/li>\n<li>onkeydown<\/li>\n<\/ul>\n<p> &#8230; those last two happening ahead of the textarea value being updated, and particularly useful in this scenario.  Here are the relevant Javascript functions &#8230;<\/p>\n<p>&lt;script type=&#8217;text\/javascript&#8217;&gt;<br \/>\n<code><br \/>\n  var colbit='01234567890abcdef';<br \/>\n<br \/>\n  function tuttifrutti(evt) {<br \/>\n    var char = evt.which || evt.keyCode;<br \/>\n    if (!evt.shiftKey && String.fromCharCode(char) &gt;= 'A' && String.fromCharCode(char) &lt;= 'Z') {<br \/>\n      char+=('a'.charCodeAt(0) - 'A'.charCodeAt(0));<br \/>\n    }<br \/>\n    var sw=document.getElementById('myta').value+String.fromCharCode(char).replace(\/\\'\/g,'');<br \/>\n    while (sw.indexOf(String.fromCharCode(10)) != -1) {<br \/>\n      sw=sw.replace(String.fromCharCode(10),'');<br \/>\n    }<br \/>\n    var colis='';<br \/>\n    for (var icol=0; icol&lt;6; icol++) {<br \/>\n      colis+='' + colbit.substring(Math.max(1,Math.floor(Math.random() * colbit.length))).substring(0,1);<br \/>\n    }<br \/>\n    document.getElementById('dstyle').innerHTML+=\"&lt;style&gt;  textarea[title^='\" + sw + \"'] { background-color: #\" + colis + \"; }    &lt;\/style&gt;\";<br \/>\n    return true;<br \/>\n  }<br \/>\n<br \/>\n  function unwell(tao) {<br \/>\n    setTimeout(function(){ document.getElementById('myta').blur();  }, 20);<br \/>\n    return true;<br \/>\n  }<br \/>\n<br \/>\n  function well(tao) {<br \/>\n    \/\/document.getElementById('iaway').focus();<br \/>\n    document.getElementById('myta').title=document.getElementById('myta').value.replace(\/\\'\/g,'');<br \/>\n    while (document.getElementById('myta').title.indexOf(String.fromCharCode(10)) != -1) {<br \/>\n      document.getElementById('myta').title=document.getElementById('myta').title.replace(String.fromCharCode(10),'');<br \/>\n    }<br \/>\n    setTimeout(function(){ document.getElementById('myta').focus();  }, 20);<br \/>\n  }<br \/>\n<\/code><br \/>\n&lt;\/script&gt;<\/p>\n<p> &#8230; which results in a textarea constantly changing dynamically with its background colour in a <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/value_starts_with.html_GETME\">proof of concept<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/value_starts_with.html\">Textarea Value Starting With<\/a> web application for the <a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=3qf4yUMxnjw'>&#8220;Value You Have When You Are Not Having a Value&#8221;<\/a>.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d62119' onclick='var dv=document.getElementById(\"d62119\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/selector\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62119' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d62123' onclick='var dv=document.getElementById(\"d62123\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/keyboard\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62123' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Because yesterday&#8217;s Starts With Textarea CSS Styling Tutorial&#8216;s &#8220;Starts With Textarea&#8221; web application involved logic with so much &#8230; HTML element focus &#8230; Javascript keyboard event logic &#8230; dependencies, we were not overly surprised testing it on mobile (iOS) platforms, &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/starts-with-textarea-css-styling-mobile-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,20,37],"tags":[4482,174,211,281,400,402,448,2208,1801,576,626,630,652,673,795,860,1631,1705,2337,894,997,1953,4625,4632,1212,1262,1294,4634,1319,1891,4633,1827],"class_list":["post-62123","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-ios","category-tutorials","tag-background-color","tag-button","tag-click","tag-css","tag-event","tag-events","tag-focus","tag-getboundingclientrect","tag-getcomputedstyle","tag-html","tag-ios","tag-ipad","tag-javascript","tag-keyboard","tag-mobile","tag-onblur","tag-onchange","tag-onkeydown","tag-onkeypress","tag-overlay","tag-programming","tag-selector","tag-starts-with","tag-stye","tag-styling","tag-textarea","tag-touch","tag-touch-screen","tag-tutorial","tag-user","tag-virtual-keyboard","tag-window-getcomputedstyle"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/62123"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=62123"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/62123\/revisions"}],"predecessor-version":[{"id":62150,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/62123\/revisions\/62150"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=62123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=62123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=62123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}