2017-05-09 22 views
0

アイコンをクリックすると開く検索ボックス入力があります。私は、アイコンがクリックされたときに入力フォーカスを与え、 "onkeydown"イベントが発生するまでラベルをプレースホルダテキストとして追加するaddLabel()関数を呼び出すと、関数removeLabel()を呼び出す必要があります。現在、私のスクリプトはfocus()を追加しますが、他のイベントリスナーは認識しません。どんな助けもありがとう!要素フォーカスにイベントリスナーを追加

window.onload = function() { 
 

 
<!-- create absolutly positioned label as placeholder text for search --> 
 
     var el = document.getElementById('gsc-i-id1'); 
 
     var label = document.createElement('label'); 
 
     var labelText = document.createTextNode('Enter your search term...'); 
 
     label.appendChild(labelText); 
 
     label.className += 'search-label-placeholder'; 
 
     var searchParent = el.parentNode; 
 
     searchParent.insertBefore(label, el); 
 

 
     var searchIcon = document.getElementById('search-icon'); 
 
     searchIcon.addEventListener('click', function(e) { 
 

 
      el.addEventListener('focus', addLabel); 
 
      el.addEventListener('keydown', removeLabel); 
 
      el.focus(); 
 
     }, false); 
 

 
      function removeLabel() { 
 

 
      el.style.textIndent = '0'; 
 
      el.setAttribute('placeholder', 'removeLabel'); 
 
      el.style.background = 'none'; 
 
      el.style.textIndent = '0'; 
 
      label.style.display = 'none'; 
 
      }; 
 
      function addLabel() { 
 

 
      el.style.textIndent = '0'; 
 
      el.setAttribute('placeholder', 'addLabel'); 
 
      el.style.background = 'none'; 
 
      el.style.textIndent = '0'; 
 
      label.style.display = 'block'; 
 
      }; 
 
     };
<div class="header-holder"> 
 
    \t <!-- header logotype --> 
 
    \t <strong class="header-logo"> 
 
       <a href="/"><img alt="Rose-Hulman Institute of Technology" src="../../../assets/images/logo-header.svg"></a> 
 
      </strong> 
 
    \t <!-- header actions --> 
 
    \t <ul class="header-actions"> 
 
    \t \t <li> 
 
    \t \t \t <button class="header-actions-btn header-actions-btn-search" data-action="search" id="search-icon"> 
 
    \t \t \t \t <span class="icon icon-search"><span class="hide-for-screen-reader">Search</span></span> 
 
    \t \t \t </button> 
 
    \t \t </li> 
 
    \t \t <li> 
 
    \t \t \t <button class="header-actions-btn header-actions-btn-menu" data-action="menu"> 
 
    \t \t \t \t <span class="icon icon-menu"><span class="hide-for-screen-reader">Menu</span></span> 
 
    \t \t \t </button> 
 
    \t \t </li> 
 
    \t </ul> 
 
    \t <!-- header search form --> 
 
    \t <div class="header-search"> 
 
    \t \t <div id="___gcse_0"> 
 
    \t \t \t <div class="gsc-control-searchbox-only gsc-control-searchbox-only-en" dir="ltr"> 
 
    \t \t \t \t <form class="gsc-search-box gsc-search-box-tools" accept-charset="utf-8"> 
 
    \t \t \t \t \t <table cellspacing="0" cellpadding="0" class="gsc-search-box"> 
 
    \t \t \t \t \t \t <tbody> 
 
    \t \t \t \t \t \t \t <tr> 
 
    \t \t \t \t \t \t \t \t <td class="gsc-input"> 
 
    \t \t \t \t \t \t \t \t \t <div class="gsc-input-box" id="gsc-iw-id1"> 
 
    \t \t \t \t \t \t \t \t \t \t <table cellspacing="0" cellpadding="0" id="gs_id50" class="gstl_50 " style="width: 100%; padding: 0px;"> 
 
    \t \t \t \t \t \t \t \t \t \t \t <tbody> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t <tr> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t <td id="gs_tti50" class="gsib_a"> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t <label class="search-label-placeholder" style="display: none;">Enter your search term...</label> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t <input autocomplete="off" type="text" size="10" class="gsc-input" name="search" title="search" id="gsc-i-id1" x-webkit-speech="" x-webkit-grammar="builtin:search" lang="en" dir="ltr" spellcheck="false" placeholder="removeLabel" style="width: 100%; padding: 0px; border: none; margin: 0px; height: auto; outline: none; background: none left center no-repeat rgb(255, 255, 255); text-indent: 0px;"> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t </td> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="gsib_b"> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t <div class="gsst_b" id="gs_st50" dir="ltr"><a class="gsst_a" href="javascript:void(0)" style="display: none;"><span class="gscb_a" id="gs_cb50">×</span></a></div> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t </td> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t </tr> 
 
    \t \t \t \t \t \t \t \t \t \t \t </tbody> 
 
    \t \t \t \t \t \t \t \t \t \t </table> 
 
    \t \t \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t \t \t \t <input type="hidden" name="bgresponse" id="bgresponse"> 
 
    \t \t \t \t \t \t \t \t </td> 
 
    \t \t \t \t \t \t \t \t <td class="gsc-search-button"> 
 
    \t \t \t \t \t \t \t \t \t <input type="image" src="https://www.google.com/uds/css/v2/search_box_icon.png" class="gsc-search-button gsc-search-button-v2" title="search"> 
 
    \t \t \t \t \t \t \t \t </td> 
 
    \t \t \t \t \t \t \t \t <td class="gsc-clear-button"> 
 
    \t \t \t \t \t \t \t \t \t <div class="gsc-clear-button" title="clear results">&nbsp;</div> 
 
    \t \t \t \t \t \t \t \t </td> 
 
    \t \t \t \t \t \t \t </tr> 
 
    \t \t \t \t \t \t </tbody> 
 
    \t \t \t \t \t </table> 
 
    \t \t \t \t \t <table cellspacing="0" cellpadding="0" class="gsc-branding"> 
 
    \t \t \t \t \t \t <tbody> 
 
    \t \t \t \t \t \t \t <tr> 
 
    \t \t \t \t \t \t \t \t <td class="gsc-branding-user-defined"></td> 
 
    \t \t \t \t \t \t \t \t <td class="gsc-branding-text"> 
 
    \t \t \t \t \t \t \t \t \t <div class="gsc-branding-text">powered by</div> 
 
    \t \t \t \t \t \t \t \t </td> 
 
    \t \t \t \t \t \t \t \t <td class="gsc-branding-img"><img src="https://www.google.com/cse/static/images/1x/googlelogo_grey_46x15dp.png" class="gsc-branding-img" srcset="https://www.google.com/cse/static/images/2x/googlelogo_grey_46x15dp.png 2x"></td> 
 
    \t \t \t \t \t \t \t </tr> 
 
    \t \t \t \t \t \t </tbody> 
 
    \t \t \t \t \t </table> 
 
    \t \t \t \t </form> 
 
    \t \t \t </div> 
 
    \t \t </div> 
 
    \t </div> 
 
</div>

+0

あなたは完全な(実行可能)の例を提供する場合それはあなたを助けるために簡単です。これはあなたの場合、HTMLマークアップも追加することを意味します。 –

+0

@ ssc-hrep3私はHTMLを追加しました – svoltmer

答えて

0

あなたのコード罰金場合。実行可能なバイブル:https://jsfiddle.net/wostex/0j3rom2m/

domの入力要素をチェックします。入力を開始するときに、 'removeLabel'というプレースホルダがあります。

あなたはフィドルにリンクするときSOので、いくつかのコードを望んでいる:

searchIcon.addEventListener('click', function(e) { 
    console.log('clicked'); 
    el.addEventListener('focus', addLabel); 
    el.addEventListener('keydown', removeLabel); 
    el.focus(); 
}, false); 
関連する問題