如何在点击事件上添加焦点（）并设置占位符文本答案

【问题标题】：How can I add focus() and set placeholder text on click event如何在点击事件上添加焦点（）并设置占位符文本
【发布时间】：2017-09-29 05:58:48
【问题描述】：

我正在向我的搜索图标添加一个事件侦听器以侦听“单击”事件，然后在触发时调用一个函数，该函数将焦点添加到元素并将占位符属性更改为“输入您的搜索词...”。当前，当单击图标时，输入显示为焦点，但没有占位符文本。我错过了什么？

 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 );
        };

【问题讨论】：

一个原因可能是 input 字段的现有值遮盖了占位符文本（占位符只有在字段中没有文本时才可见）。
这是来自 Google 自定义搜索的输入：` `
看起来这可能是 stackoverflow.com/questions/35126085/… 的副本。另见stackoverflow.com/questions/10688387/… 和sitepoint.com/style-google-custom-search。
这些都没有解决我遇到的问题。加上内容已经过时，我没有使用 jQuery。（即使我是，这些主题也不相关）

标签： javascript

【解决方案1】：

你用的是什么浏览器？ IIRC，IE（至少 11 个，不知道“Edge”）将在字段获得焦点后立即隐藏占位符。（不过，Chrome 做到了这一点。）

【讨论】：

我正在使用 Chrome。