Question

为了实现我的盒子，我选择了CSE Result Only外观。

我通过将功能附加到onblur和onfocus来完成Google CS的品牌塑造。我在Google的Demo上找到了代码。

一切正常，但这是一个令人烦恼的IE计划：

用户在框中输入并搜索
用户点击在当前窗口中打开的链接
如果他点击回来，该框会显示查询和框的背景。

在不同的浏览器上删除查询。我的问题是如何清除框或删除背景。

用户单击后，IE未运行我的代码（在我的品牌代码中有效）。

这是我用来绑定事件的代码。

(function() {
  var f = document.getElementById('cse-search-box-form-id');

  if (f && f['cse-search-input-box-id']) {
    var q = f['cse-search-input-box-id'];
    var n = navigator;
    var l = location;
    var du = function(n, v) {
      var u = document.createElement('input');
      u.name = n;
      u.value = v;
      u.type = 'hidden';
      f.appendChild(u);
      return u;
    };
    var su = function(n, t, v, l) {
      if (!encodeURIComponent || !decodeURIComponent) {
        return;
      }
      var regexp = new RegExp('(?:[?&]' + n + '=)([^&#]*)');
      var existing = regexp.exec(t);
      if (existing) {
        v = decodeURIComponent(existing[1]);
      }
      var delimIndex = v.indexOf('://');
      if (delimIndex >= 0) {
        v = v.substring(delimIndex + '://'.length, v.length);
      }
      var v_sub = v.substring(0, l);
      while (encodeURIComponent(v_sub).length > l) {
        v_sub = v_sub.substring(0, v_sub.length - 1);
      }
      du(n, v_sub);
    };
    var pl = function(he) {
      var ti = 0,
        tsi = 0,
        tk = 0,
        pt;
      return function() {
        var ct = (new Date).getTime();
        if (pt) {
          var i = ct - pt;
          ti += i;
          tsi += i * i;
        }
        tk++;
        pt = ct;
        he.value = [ti, tsi, tk].join('j');
      };
    };
    var append = false;
    if (n.appName == 'Microsoft Internet Explorer') {
      var s = f.parentNode.childNodes;
      for (var i = 0; i < s.length; i++) {
        if (s[i].nodeName == 'SCRIPT' &&
          s[i].attributes['src'] &&
          s[i].attributes['src'].nodeValue == unescape('http:\x2F\x2Fwww.google.com\x2Fcse\x2Fbrand?form=cse-search-box-form-id\x26inputbox=cse-search-input-box-id')) {
          append = true;
          break;
        }
      }
    } else {
      append = true;
    }
    if (append) {

      var loc = document.location.toString();
      var ref = document.referrer;
      su('siteurl', loc, loc, 250);
      su('ref', loc, ref, 750);



      if (q.addEventListener) {
        q.addEventListener('keyup', pl(du('ss', '')), false);
      } else if (q.attachEvent) {
        q.attachEvent('onkeyup', pl(du('ss', '')));
      }
    }


    if (n.platform == 'Win32') {
      q.style.cssText = 'border: 0px ';
    }


    if (window.history.navigationMode) {
      window.history.navigationMode = 'compatible';
    }

    var b = function() {
      if (q.value == '') {
        q.style.background = '#fff url(http:\x2F\x2Fwww.google.com\x2Fcse\x2Fintl\x2Fen\x2Fimages\x2Fgoogle_custom_search_watermark.gif) 3.5% 80% no-repeat';
      }
    };

    var f = function() {
      q.style.background = '#fff';
    };

    q.onfocus = f;
    q.onblur = b;


    if (!/[&?]q=[^&]/.test(l.search)) {
      b();
    }
  }
})();

<div class="search-bar-outer">
  <form onsubmit="return executeQuery();" id="cse-search-box-form-id">
    <div class="search-box-outer">
      <input type="text" id="cse-search-input-box-id" size="25" autocomplete="off"                       style="border: 0px;" class="search-input">
    </div>
    <div class="search-button-outer">
      <button type="submit" class="search-button"></button>
    </div>
  </form>
  <script type="text/javascript" src="js/branding.js"></script>
</div>

IE上的Google CSE品牌重新出现在自定义搜索框中

0 个答案: