在我的 html 网站的谷歌自定义搜索引擎的文本框中添加占位符

Posted 2023-03-05

【中文标题】在我的 html 网站的谷歌自定义搜索引擎的文本框中添加占位符

【英文标题】：Adding placeholder to text box in google custom search engine in my html website

【发布时间】：2016-05-09 15:24:01

【问题描述】：

我使用以下代码添加了谷歌自定义搜索引擎。

(function() 
    var cx = '005899633628958982661:wekn1lpckzg';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
                '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
)();

现在我的网站有一个可用的搜索框，唯一的问题是我无法为搜索文本框使用占位符。

我也试过代码

$('input.gsc-input').attr('placeholder', 'custom text here');

但它不起作用。

【问题讨论】：

输入正确吗？我也会使用引号"

您是否正在使用 document.ready 调用此行？我在上面的代码中没有看到它

是的，它是 uder document.ready.. 我也尝试将代码放在页面末尾，但这也无济于事。

***.com/questions/10688387/…

我刚刚尝试了上面的链接，我需要对代码进行任何更改还是应该按原样粘贴？因为按原样粘贴也无济于事。

【参考方案1】：

这个对我有用：

window.onload = demo;

function demo() 
    document.getElementById("gsc-i-id1").setAttribute("placeholder", "SEARCH")

【参考方案2】：

我使用了以下代码，它对我有用！

(function()    
    var cx = '!!!!!!!!!!!!!!!!!!!';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx='+ cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
)();

window.onload = function()
document.getElementById('gsc-i-id1').placeholder = 'SEARCH';
;

【讨论】：

我猜，document.getElementsByNames('search')[0].placeholder 更好.. 因为搜索框的 id 是随机的。

如果您使用的是 GCS，则 id 可以通过检查元素确定。因为在复杂页面上可能有另一个与“搜索”同名的元素！ @AnuBhuvanendranNair document.getElementsByNames 并不总是有效和可靠的方式。

Google 自定义搜索会生成 id 'gsc-i-id1'，有时会生成 'gsc-i-id2'.. 据我了解，id 值是随机的。那document.getElementById怎么靠谱？？

嗯，它在我的实时网站上使用 id 可以完美运行很长时间，所以一旦它为特定页面生成 id，只要我知道它最终不会改变它。您只需要通过检查元素查找 id 并且只需在代码中放置一次。所以对我来说 id 简单可靠！！

id 在所有站点上都是相同的，就我而言，确切的 id 在 3 个安装上。谢谢这个解决方案效果很好。