{"id":40328,"date":"2018-08-24T03:01:48","date_gmt":"2018-08-23T17:01:48","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=40328"},"modified":"2023-11-13T12:12:05","modified_gmt":"2023-11-13T02:12:05","slug":"html-input-placeholder-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-input-placeholder-primer-tutorial\/","title":{"rendered":"HTML Input Placeholder Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/placeholder_keyboard.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML Input Placeholder Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/placeholder_keyboard.jpg\" title=\"HTML Input Placeholder Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML Input Placeholder Primer Tutorial<\/p><\/div>\n<p>We find the HTML <a target=_blank title='HTML input tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_input.asp'>input<\/a> tag <a target=_blank title='HTML placeholder attribute information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_input_placeholder.asp'>placeholder<\/a> attribute an interesting feature, in that we find the labelling of HTML input type=text textboxes a bit awkward in a styling sense for left justified forms in that the textboxes need extra work to be aligned, whereas &#8230;<\/p>\n<ul>\n<li>input <a target=_blank title='Event onfocus information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onfocus.asp'>onfocus<\/a>=placechar(this); type=text placeholder=x id=kx element can act a bit like a button as per your (more usual) &#8230;<\/li>\n<li>input onclick=placechar(this); type=button value=x id=kx element<\/li>\n<\/ul>\n<p> &#8230; and yet, if you needed to you could also check for typed entries (via the onblur event logic we&#8217;ve added in too) with the former scenario we &#8220;purloin&#8221; into play for today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/placeholder_keyboard.html\" title=\"Click picture\">live run<\/a> (first draft) and its underlying HTML and Javascript &#8230;<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n var okd=false;<br \/>\n function placechar(isonblur,owhat) {<br \/>\n  if (owhat.value != '' || isonblur) {<br \/>\n   document.getElementById('myh4').innerHTML+=owhat.value;<br \/>\n   owhat.value='';<br \/>\n  } else {<br \/>\n   okd=false;<br \/>\n   document.getElementById('myh4').innerHTML+=('' + owhat.id + ' ').replace('k','').substring(0,1);<br \/>\n   setTimeout(aminusc,2000);<br \/>\n  }<br \/>\n }<br \/>\n function aminusc() {<br \/>\n  if (!okd) {<br \/>\n    document.getElementById('xx').focus();<br \/>\n  }<br \/>\n }<br \/>\n&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/placeholder_keyboard.html_GETME\" title=\"placeholder_keyboard.html\">placeholder_keyboard.html<\/a> source code.  This little proof of concept webpage has some QWERTY keyboard keys represented in that &#8220;input onfocus=placechar(this); type=text placeholder=x id=kx&#8221; kind of way, where what is &#8220;typed&#8221; appears in an HTML h4 field up above it (which we find irresistible to attribute with <a target=_blank title='Contenteditable attribute information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a>=&#8221;true&#8221;).<\/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='#d40328' onclick='var dv=document.getElementById(\"d40328\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/placeholder\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d40328' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We find the HTML input tag placeholder attribute an interesting feature, in that we find the labelling of HTML input type=text textboxes a bit awkward in a styling sense for left justified forms in that the textboxes need extra work &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-input-placeholder-primer-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,37],"tags":[174,2442,281,400,576,609,652,673,860,2077,2643,997,1319],"class_list":["post-40328","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-button","tag-contenteditable","tag-css","tag-event","tag-html","tag-input","tag-javascript","tag-keyboard","tag-onblur","tag-onfocus","tag-placeholder","tag-programming","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/40328"}],"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=40328"}],"version-history":[{"count":14,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/40328\/revisions"}],"predecessor-version":[{"id":61631,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/40328\/revisions\/61631"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=40328"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=40328"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=40328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}