0
我有一個搜索框輸入，當單擊圖標時打開。我想在單擊圖標時給出輸入焦點，並調用addLabel（）函數，該函數將標籤添加爲佔位符文本，直到觸發「onkeydown」事件，此時應調用函數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"> </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>
它更容易幫助你，如果你提供一個完整的（可運行）的例子。這意味着在你的情況下，也添加了HTML標記。 –
@ ssc-hrep3我已經添加了HTML – svoltmer