如果我开始用星号或选定的字母书写，如何定义搜索字段中的文本颜色？

Question

使用这个js代码，我们可以在以星号开头时隐藏div，或者在以字母或其他符号开头时显示div。当我用星号开始的时候，我需要改变我写的文字的颜色。也就是说，如果我以一个或多个字母开头，div出现在下面，并保持黑色，但是如果我以星号开头，div不会出现，而是显示星号，我写的下列单词必须以绿色显示。

https://jsfiddle.net/z6cgxjek/

​

    $('#search').keyup(function(event) {
    $('#hello').show();    
    if(!event.target.value.trim() || event.originalEvent.charCode === 42 || event.target.value.startsWith("*")) {
      $('#hello').hide();
    } else {
      $('#hello').show();
    }
});

#hello {
  display:none;
}

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

​

Answer 1

您可以尝试使用获取/设置一个或多个CSS属性。在这里，我更喜欢输入事件而不是keyup：

​

$('#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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="search" autocomplete="off"/>
<div id="hello" >Hello World!</div>

​