使用CSS从特定Div中排除jQuery

debugcn 发表于 Dev

开发人员

该网站使用此js，它破坏了在网站品牌div中添加的搜索表单输入字段

/**
 * Remove all off-canvas states
 */
 function removeAllFocusStates() {
    'use strict';

    var siteBranding = document.getElementsByClassName('site-branding')[0];
    var getFocusedElements = siteBranding.querySelectorAll(':hover, :focus, :focus-within');
    var getFocusedClassElements = siteBranding.querySelectorAll('.is-focused');
    var i;
    var o;

    for (i = 0; i < getFocusedElements.length; i++) {
        getFocusedElements[i].blur();
    }

    for (o = 0; o < getFocusedClassElements.length; o++) {
        deleteClass(getFocusedClassElements[o], 'is-focused');
    }
}

这是网站品牌容器的HTML输出

<div class="site-branding">
    <form role="search" method="get" class="search-form" action="http://dev.local/">
        <label>
            <span class="screen-reader-text">Search for:</span>
            <input type="search" class="search-field" placeholder="Search …" value="" name="s" />
        </label>
        <input type="submit" class="search-submit" value="Search" />
    </form>        
</div>

更新：这是正在使用的removeAllFocusStates（）函数，需要对其进行修改以排除搜索表单

  ...
  document.addEventListener('click', function(event) {

      // Remove all focused menu states when clicking outside site branding
      if (event.target !== document.getElementsByClassName('site-branding')[0]) {
          removeAllFocusStates();
      } else {
          // nothing
      }

  }, false);
}

用户无法在搜索输入字段中输入文本，因为js正在修改默认输入字段。

有没有一种方法可以使用CSS来解决此问题，因此它不适用于标头内网站品牌div中添加的搜索表单输入字段？

否则，有没有办法修改js，使其不影响搜索表单？

我确实搜索了类似的问题，但是找不到适合该问题的任何内容。

每件事

removeAllFocusStates()当用户单击输入时，尝试不拨打电话。

所以

if (event.target !== document.getElementsByClassName('site-branding')[0]) {

变成像

if ( (event.target !== document.getElementsByClassName('site-branding')[0]) && (event.target !== document.getElementsByClassName('search-field')[0]) ) {

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。