Question

我有一个搜索框输入，在点击图标时会打开。我想在单击图标时给出输入焦点并调用addLabel（）函数，该函数将标签添加为占位符文本，直到触发“onkeydown”事件，此时它应调用函数removeLabel（）。目前，我的脚本添加了focus（），但不承认其他事件侦听器。任何帮助将不胜感激！

＆＃13;

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';
            };
        };

＆＃13;

<div class="header-holder">
    	<!-- header logotype -->
    	<strong class="header-logo">
                <a href="/"><img alt="Rose-Hulman Institute of Technology" src="../../../assets/images/logo-header.svg"></a>
            </strong>
    	<!-- header actions -->
    	<ul class="header-actions">
    		<li>
    			<button class="header-actions-btn header-actions-btn-search" data-action="search" id="search-icon">
    				<span class="icon icon-search"><span class="hide-for-screen-reader">Search</span></span>
    			</button>
    		</li>
    		<li>
    			<button class="header-actions-btn header-actions-btn-menu" data-action="menu">
    				<span class="icon icon-menu"><span class="hide-for-screen-reader">Menu</span></span>
    			</button>
    		</li>
    	</ul>
    	<!-- header search form -->
    	<div class="header-search">
    		<div id="___gcse_0">
    			<div class="gsc-control-searchbox-only gsc-control-searchbox-only-en" dir="ltr">
    				<form class="gsc-search-box gsc-search-box-tools" accept-charset="utf-8">
    					<table cellspacing="0" cellpadding="0" class="gsc-search-box">
    						<tbody>
    							<tr>
    								<td class="gsc-input">
    									<div class="gsc-input-box" id="gsc-iw-id1">
    										<table cellspacing="0" cellpadding="0" id="gs_id50" class="gstl_50 " style="width: 100%; padding: 0px;">
    											<tbody>
    												<tr>
    													<td id="gs_tti50" class="gsib_a">
    														<label class="search-label-placeholder" style="display: none;">Enter your search term...</label>
    														<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;">
    													</td>
    													<td class="gsib_b">
    														<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>
    													</td>
    												</tr>
    											</tbody>
    										</table>
    									</div>
    									<input type="hidden" name="bgresponse" id="bgresponse">
    								</td>
    								<td class="gsc-search-button">
    									<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">
    								</td>
    								<td class="gsc-clear-button">
    									<div class="gsc-clear-button" title="clear results">&nbsp;</div>
    								</td>
    							</tr>
    						</tbody>
    					</table>
    					<table cellspacing="0" cellpadding="0" class="gsc-branding">
    						<tbody>
    							<tr>
    								<td class="gsc-branding-user-defined"></td>
    								<td class="gsc-branding-text">
    									<div class="gsc-branding-text">powered by</div>
    								</td>
    								<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>
    							</tr>
    						</tbody>
    					</table>
    				</form>
    			</div>
    		</div>
    	</div>
</div>

＆＃13;

Answer 1

你的代码很好。可行的小提琴：https://jsfiddle.net/wostex/0j3rom2m/

检查dom中的输入元素 - 它有＆＃39; removeLabel＆＃39;在您开始输入时占位符。

当你链接到小提琴时，想要一些代码，所以：

searchIcon.addEventListener('click', function(e) {
  console.log('clicked');
  el.addEventListener('focus', addLabel );
  el.addEventListener('keydown', removeLabel );
  el.focus();
}, false );

在元素焦点上添加事件侦听器

1 个答案: