Question

使用此代码在搜索字段中输入字符或字母时，将打开一个div（Hello World！）。但是，如果第一个字符是星号，则div消失。现在，有两个搜索按钮，一个红色和一个蓝色，我需要的是，同时写入第一个字符或字母（只要它不是星号）时，蓝色搜索按钮就会覆盖或替换红色按钮（蓝色按钮最初必须隐藏）。

参见：https://jsfiddle.net/qhxysu1o/1/

$('#search').on('input', function(event) {
  $('#hello').show();    
  if(!event.target.value.trim() || event.originalEvent.charCode === 42 || event.target.value.startsWith("*")) {
    $('#hello').hide();
    $(this).css({color: 'green'});
  } else {
    $('#hello').show();  
    $(this).css({color: ''});
  }
});

#hello {
  display:none;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {

  -webkit-text-fill-color: green;

}
  .searchButton4 {
              position: relative;
     font-weight:normal;
       border-top-right-radius: 22px;
  border-bottom-right-radius: 22px;
         border-top-left-radius: 22px;
  border-bottom-left-radius: 22px;
  font-size: 12px;
  max-width: 130px;
    width: 38px;
  height: 39px;
 border: 0px solid #fff;
  text-align: center;
  color: #fff;
  cursor: pointer;
  margin-left:13px;
  top:0px;
    right:5px;
    outline: none;
      background: #d9534f;
}
.searchButton4:hover {
  background: #c34a47;
  }
.searchButton4_2 {
  position: relative;
     font-weight:normal;
       border-top-right-radius: 22px;
  border-bottom-right-radius: 22px;
         border-top-left-radius: 22px;
  border-bottom-left-radius: 22px;
  font-size: 12px;
  max-width: 130px;
    width: 38px;
  height: 39px;
 border: 0px solid #fff;
  text-align: center;
  color: #fff;
  cursor: pointer;
  margin-left:13px;
  top:0px;
    right:5px;
    outline: none;
      background: #02acdb;
      margin-left:-20px;
}
.searchButton4_2:hover {
  background: #0094bd;
  } 

}

<input id="search" autocomplete="on"/>
<div id="hello" >Hello World!</div>

<button type="submit" class="searchButton4" data-toggle="tooltip" data-placement="top" title="Jogar BetCode"><i class="fa fa-play fa-lg"></i>Search</button>

<button type="submit" id="hello2" class="searchButton4_2" data-toggle="tooltip" data-placement="top" title="Jogar BetCode"><i class="fa fa-play fa-lg"></i>Search</button>

Answer 1

hello world div的位置已更改。 https://jsfiddle.net/b08uhkz3/


<input id="search" autocomplete="on"/>


<button type="submit" class="searchButton4" data-toggle="tooltip" data-placement="top" title="Jogar BetCode" id="hello1"><i class="fa fa-play fa-lg"></i>Search</button>

<button type="submit" id="hello2" class="searchButton4_2" data-toggle="tooltip" data-placement="top" title="Jogar BetCode"><i class="fa fa-play fa-lg"></i>Search</button>
<div id="hello" >Hello World!</div>


$('#search').on('input', function(event) {
  $('#hello').show();    
  if(!event.target.value.trim() || event.originalEvent.charCode === 42 || event.target.value.startsWith("*")) {
    $('#hello').hide();
    $("#hello1").show();
    $("#hello2").hide();
    $(this).css({color: 'green'});
  } else {
    $('#hello').show();  
     $("#hello1").hide();
    $("#hello2").show();
    $(this).css({color: ''});
  }
});

此CSS已添加。

.searchButton4_2 {
left:29px;
}

书写字母时更改输入按钮的颜色？

1 个答案: