Question

我有一个显示输入onClick的javascript代码。问题是，它控制着我的整个标题：如果你点击徽标，广告，周围的任何东西;输入显示如下。是否有一个选项来设置宽度或做一些事情来阻止我的代码控制整个标题？ HTML：

<div id="element2" onClick="javascript:changeText(2);showhide('search-form-ft');ftinPut();" class="element2">search</div>
<div class="cse-branding-right" id="search-form-ft" style="display:none;">
  <div class="cse-branding-form">
    <form class="search-form" action="http://www.google.com" id="cse-search-box-ft" target="_blank">
      <div>
        <input type="hidden" name="cx" value="partner-pub-5818823801401028:2026832598" />
        <input type="hidden" name="ie" value="UTF-8" />
        <input  id="ftinPut" class="ftinPut" type="text" name="q" size="24" placeholder="what would you like to search?" />
        <input type="image" src="/wp-content/uploads/2014/08/orange-ico.png" class="orange-ico" title="well, search it!" />
<font title="Powered by Google Custom Search" class="poweredcse">Powered by <img class="watermark" title="Google ">custom search</font>
      </div>
    </form>
  </div>
</div>

Js：

function changeText(idElement) {
    var element = document.getElementById('element' + idElement);
    if (idElement === 2) {
        if (element.innerHTML === 'search') element.innerHTML = 'cancel';
        else {
            element.innerHTML = 'search';
        }
    }
}
function ftinPut() {
    document.getElementById("ftinPut").select();
}
var state = 'none';
function showhide(layer_ref) {
if (state == 'block') { 
state = 'none'; 
} 
else { 
state = 'block'; 
} 
if (document.all) { //IS IE 4 or 5 (or 6 beta) 
eval( "document.all." + layer_ref + ".style.display = state"); 
} 
if (document.layers) { //IS NETSCAPE 4 or below 
document.layers[layer_ref].display = state; 
} 
if (document.getElementById &&!document.all) { 
hza = document.getElementById(layer_ref); 
hza.style.display = state; 
} 
}

＆安培; CSS：

.element2 {
  padding-left:22px;
  font-size:20px;
  color:orange;
  text-transform:uppercase;
  text-shadow: 0 3px 6px rgba(230, 227, 202, 1);
  font-family:segoe UI light,candara,georgia;
  background:url(/wp-content/uploads/2014/06/search.png) left no-repeat;
  background-position:0 96px;
  background-size:21px;
}
.element2:hover {
  opacity:.7;
}
.ftinPut {
  height:28px;
  padding-left:28px!important;
  color:orange!important;
  border:none!important;
  font-family:segoe UI Light,candara;
  background:url(/wp-content/uploads/2014/08/Pencil.png)left no-repeat;
  background-size:20px 20px;
  background-position:4px 7px;
}

Answer 1

您只需要更改应用于该元素的CSS。

将此CSS规则添加到element2，它可以正常工作：

#element2 {
    margin-left: 192px;
    padding: 0; // or just remove the padding-left rule
    width: 72px;
}

Javascript onClick ShowHide控制我的整个标题

1 个答案: