Question

我希望占位符相对于单击的选项卡进行更改。即：目录-“搜索目录”网站-搜索网站。

/*! CSS Used from: https://www.provolibrary.com/templates/provolibrary/css/pcl-general.css */
div,a,form{margin:0;padding:0;border:0;vertical-align:baseline;}
a,a:visited{color:#4f2683;text-decoration:none;}
a:active,a:hover{text-decoration:underline;}
a{font-weight:700;}
#search-box a{font-weight:400;}
@media handheld, screen and (min-width: 620px){
.search-tab,.search-tab-link{display:inline;color:#fff;background-color:#7bc143;text-decoration:none;padding:8px;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.search-tab:hover{background-color:#807f83;}
.search-tab.selected{color:#fff;background-color:#4f2683;}
.search-tab-link{background-color:#009ddc;}
#search-box{position:relative;min-height:100px;clear:both;margin:-71px 0 0;float:right;display:block;z-index:999;padding:0;}
#search-box .search-bar{background:#fff;height:24px;border-bottom:1px solid #807f83;border-left:1px solid #807f83;border-top:1px solid #807f83;}
#search-box input{float:left;margin:0;}
#search-box input:focus{outline:none;}
#search-box #search-text-icon{float:left;width:auto;height:auto;position:absolute;right:0;margin:-1px 15px 0 0;cursor:pointer;}
#search-box #search-text{height:23px;width:75%;border:0;font-size:13px;line-height:23px;font-family:Helvetica, Arial, sans-serif;background:transparent;color:#000;margin:0;padding:0 0 0 11px;}
.search-tab-content{background-color:#4f2683;padding:15px;margin-top:8px;}
#search-old-catalog{text-align:left;}
}
@media screen and (min-width: 1040px){
#search-box{top:40px;}
}
@media handheld, screen and (max-width: 619px){
#search-box{display:none;}
input[type="text"]{-webkit-appearance:none;border-radius:0;}
}

<form style="margin-top:40px;" id="search-box" action="/website-search">
  <div class="search-tab" data-search-type="catalog">Catalog </div>
  <div class="search-tab selected" data-search-type="website">Website </div>

  <a href="t$003f/" target="_blank" style="text-decoration:none">
      <div class="search-tab-link"> Login </div>
  </a>

  <div class="search-tab-content">
      <div class="search-bar">
          <input type="text" id="search-text" placeholder="Search Website" name="q">
          <input type="image" alt="go" id="search-text-icon" title="Search" src="/templates//images/search_website_btn.png">
      </div>
  </div>
  <div id="search-old-catalog"> <a href="http://.com/" target="_blank">Old Catalog</a></div>
</form>

Answer 1

使用简单且易于阅读/学习的JavaScript相对简单。

首先，您要查找该类的所有元素。

var searchTabs = document.querySelectorAll('.search-tab');

然后，遍历每个元素并附加一个点击侦听器。

for (var i = 0; i < searchTabs.length; i++) {
    searchTabs[i].addEventListener('click', function(event) {

        var searchType = event.target.dataset.searchType;

        document.getElementById("search-text").placeholder = "Search " + searchType;
    });
}

您将在上面的代码段中看到我已经为该事件定义了一个处理程序。

它将根据data-search-type属性替换元素（在这种情况下为搜索栏）占位符。

这里是Fiddle。

Answer 2

这可以使用纯JavaScript来完成。

var tabs = document.getElementsByClassName('search-tab');
Array.prototype.forEach.call(tabs, function(tab){
    tab.onclick = function(e){
        var txt = e.target.getAttribute("data-search-type");
        document.getElementById("search-text").setAttribute("placeholder", "Search " + txt);
    }
});

Answer 3

HTML-

`

<div class="search-tab" data-search-type="catalog"onclick="changePlaceHolder()">
    Catalog 
</div>

<input type="text" id="search-text" placeholder="Search Website" name="q">

`

Js- `

function changePlaceHolder(){
    document.getElementById('search-text').setAttribute('placeholder', 'mytext');
}

`

Answer 4

如果要使用纯JS，请在每个div选项卡中放置一个onClick处理程序。看到这个小提琴：https://jsfiddle.net/nhumr3ag/

<div class="search-tab" data-search-type="catalog" onClick="changeText(this)">Catalog </div>
<div class="search-tab selected" data-search-type="website" onClick="changeText(this)">Website </div>
<script>
    function changeText(div) {
        document.getElementById("search-text").placeholder = 'Search ' + div.innerText;
    }
</script>

单击选项卡时如何更改占位符文本

4 个答案: