-1
<div class="wpp_search_attribute_wrap">
  <input type="text" id="wpp_search_element_3712"
         class="area wpp_input wpp_input wpp_searchable" 
         name="wpp_search[area]" value="" 
         placeholder="" />
</div>`

Here is the HTML of a wordpress widget I can't edit. I'd like to add the placeholder text to "click here to enter text", but there doesn't seem to be a CSS way of doing so.

I can't edit the HTML (which would be the best solution!) but I can add in CSS/Javascript.

I've tried adding an element below the input box, then setting the input box to transparent and on focus setting the new element below to white, so it appears to work like a regular placeholder text, but it's not reliable enough.

edit: Also the ID changes on each page reload/visitor I presume to avoid cross searches. Is there a way to target the name="wpp_search[area]" as this remains constant in the HTML.

GT22
  • 503
  • 1
  • 8
  • 25
  • 3
    Why can't you edit the HTML? What other tools do you have at your disposal (JavaScript, etc)? – George Cummins Apr 06 '16 at 23:29
  • The HTML is inside a wordpress widget, I can't edit it as it would break with every plugin update. I can use javascript or css or add html around the wordpress plugin, if that helps? – GT22 Apr 06 '16 at 23:30
  • 1
    You are asking for a way to edit the HTML, without editing the HTML. That's problematic, so one solution is to submit your change request to the widget maintainer. Alternately, you could fork the widget and use your own version. Finally, you can use JavaScript to modify the placeholder value in the same way that you would modify any other element attribute. – George Cummins Apr 06 '16 at 23:33
  • I'm not a javascript guy, how do I modify the placeholder value with javascript? – GT22 Apr 06 '16 at 23:34
  • http://stackoverflow.com/questions/13506481/change-placeholder-text – George Cummins Apr 06 '16 at 23:35
  • I've read that, as the input ID changes on each page reload this won't work. Is there a way to get the NAME of the element with javascript? eg `getElementByName` ? – GT22 Apr 06 '16 at 23:53

2 Answers2

2

Did you try something like: document.getElementById("wpp_search_element_3712").placeholder = "click here to enter text";

imnancysun
  • 612
  • 8
  • 14
2

The JavaScript solution is to use:

document.getElementById("wpp_search_element_3712").placeholder = "Text Here";

Update: Since the ID is inconsistent, use getElementsByName("wpp_search[area]")[0].

4castle
  • 32,613
  • 11
  • 69
  • 106
  • Thanks I was looking at `$('#element1_id').attr('placeholder','Some New Text 1');` but yoru solution makes more sense! – GT22 Apr 06 '16 at 23:38
  • so the ID changes on every page load it may be `wpp_search_element_1234` but every time the page reloads `1234` is a different string of numbers. Can I used `getElementByName` or does that not exist in javascript? – GT22 Apr 06 '16 at 23:51
  • That was a really close guess! I've updated the code to address that issue. – 4castle Apr 07 '16 at 00:12
  • Thank you for your help. I finally got this working! I had to add the javascript in the footer as adding it in the head wouldn't work because the widget hadn't written out it's code yet! *facepalm* – GT22 Apr 07 '16 at 00:20