让输入框灰色的问题

Question

当焦点没在输入框里，并且没有输入内容是，里面有文字，并为灰色；当有焦点在输入框里，有内容输入，则正常输入；
代码可以实现。但是当有类型，并选择时，我要显示不同的灰色文字，请教该怎办
当选择北京时，举例文字为“故宫”；选择上海时，举例文字为“外滩”var example="故宫";
function searchOnfocus() {
    if ($("#textfield").val() == example) {
        $("#textfield").val("");
        $("#textfield").removeClass("out");
    }
}
function searchOnblur() {
    if ($("#textfield").val() == "") {
        $("#textfield").val(example);
        $("#textfield").addClass("out");
    }
}
.out
{
    color:Gray
 }
<select id="searchType">
     <option value="1">北京</option>
     <option value="2">上海</option>
</select>
      <input name="textfield" id="textfield" type="text" size="20" class="out"
          onfocus="searchOnfocus()" onblur="searchOnblur()" />

Answer 1

添加空标志 var none=true;
select.onselectchange事件中 按你的逻辑更新example的值 然后再调用次searchOnfocus()
function searchOnfocus() {
    if (none) {
        $("#textfield").val("");
        $("#textfield").removeClass("out");
    }
}function searchOnblur() {
    if ($("#textfield").val() == "") {
        $("#textfield").val(example);
        $("#textfield").addClass("out");
        
    }else{
         none=false;
    }
}

Answer 2

思路：
1.设置初始值：
如：文本框的默认值value="请输入文字"
默认背景颜色:style:"background-color:灰色;"2.当焦点聚集到该文本框时，就用另外的样式，
onFocus="" //表示获得焦点事件
如：背景色为白色，初始值为空
style:"background-color:白色;"
value=""; //清空文本框

Answer 3

还是不行啊<script>
var example="故宫";//初始是北京，所以显示故宫
var s=$("#searchType").val();//查下拉框的值
var none=true;$(function() {$("#textfield").val(example); });//初始化
         
function b(){
   if(s=="1"){
       example="故宫";
       searchOnfocus();
   }
   else if(s=="2"){
       example="外滩";
       searchOnfocus();
   }
function searchOnfocus() {
    if (none) {
        $("#textfield").val("");
        $("#textfield").removeClass("out");
    }
}
function searchOnblur() {
    if ($("#textfield").val() == "") {
        $("#textfield").val(example);
        $("#textfield").addClass("out");
    }
    else
        none=false;
}
</script>
.out
{
    color:Gray
 }
<select id="searchType" onchange="b()">
     <option value="1">北京</option>
     <option value="2">上海</option>
</select>
      <input name="textfield" id="textfield" type="text" size="20" class="out"
          onfocus="searchOnfocus()" onblur="searchOnblur()" />