0

I am adding an event listener to my search-icon to listen for "click" events and then when fired call a function that adds focus to the element and changes the placeholder attribute to "Enter your search term...". Currently when the icon is clicked, the input appears with focus, but no placeholder text. What am I missing? 

 window.onload = function() {
        var el = document.getElementById('gsc-i-id1');
        el.setAttribute('placeholder', 'Enter your search term...');
        el.style.background = '';
        el.style.textIndent = '0';
        el.addEventListener('blur', function(e) {
            e.target.style.backgroundImage = 'none';
            e.target.style.textIndent = '0';
            }, false );

        var searchIcon = document.getElementById('search-icon');
        searchIcon.addEventListener('click', function(e) {
                e.preventDefault();
                el.focus( function() {
                el.setAttribute('placeholder', 'Enter your search term...');
                });
            }, false );
        };
svoltmer
  • 33
  • 1
  • 5
  • One reason could be that an existing value for the `input` field is obscuring the placeholder text (placeholder should only be visible if there's no text already within the field). – Conan May 01 '17 at 20:00
  • Here is the input as it comes in from Google custom search: ` ` – svoltmer May 01 '17 at 20:18
  • Looks like this could be a duplicate of http://stackoverflow.com/questions/35126085/adding-placeholder-to-text-box-in-google-custom-search-engine-in-my-html-website. See also http://stackoverflow.com/questions/10688387/providing-placeholder-or-value-to-a-commercial-version-of-google-custom-search-b and https://www.sitepoint.com/style-google-custom-search/. – Conan May 01 '17 at 20:30
  • Neither of these are addressing the issue I am having. Plus the content is outdated and I am not using jQuery. (even if I was, these topics are not related) – svoltmer May 02 '17 at 13:48

1 Answers1

0

What browser are you using? IIRC, IE (11 at least, don't know about "Edge") will hide the placeholder as soon as the field receives focus. (Chrome gets this right, though.)

DavidW
  • 1,413
  • 10
  • 17