Question

我迫切需要根据用户在表单选择输入中的选择来更改我的搜索表单的默认输入文本。当前的默认输入文本是输入关键字... ，无论选择何种选项，都保持不变。我想要的是，例如，当用户选择“员工目录”时，将搜索字段的默认输入文本更改为输入员工的名字......

这是每个选择的所需输入字段：

“网站” = 输入关键字...

“员工目录” = 输入员工的名字......

“出版物中心” = 输入出版物的信息......

这是我目前的代码：

<script type="text/javascript">
    function dosearch() {
    var sf=document.searchform;
    var submitto = sf.engines.options[sf.engines.selectedIndex].value + escape(sf.s.value) + ((sf.engines.selectedIndex=='1')?('&cat=29'):(''));
    window.location.href = submitto;
    return false;
    }
</script>



<form name="searchform" class="search" method="get" onSubmit="return dosearch();"> 

    <select class="engines" name="engines" id="el08">
        <option value="/?s=" selected>Website</option>
        <option value="/?s=">Publications Center</option>
        <option value="/employee-directory?query=name&contact_dir_s=">Employee Directory</option>
    </select>

    <input name="s" class="input" type="text" value="Enter Keywords..." onfocus="if (this.value == 'Enter Keywords...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter Keywords...';}" size="18" maxlength="50"> 

    <input type="submit" name="searchsubmit" class="button" value="Go" />

 </form>

任何有专业知识帮助编写此代码或提供建议的人都可以！干杯！

Answer 1

更新了实际可行的代码（仅在IE中测试过）。此版本会在选定的搜索选项发生更改时进行注释，然后在显示与之前选择的搜索选项一起显示的默认提示时更新输入。

<body onload="setDefault();">
<form name="searchform" class="search" method="get" onSubmit="return dosearch();">
   <select class="engines" name="engines" id="el08" onchange="setDefault();">
       <option value="/?s=" selected>Website</option>
       <option value="/?s=">Publications Center</option>
       <option value="/employee-directory?query=name&contact_dir_s=">Employee Directory</option>
   </select>
   <input name="s" id="searchBox" class="input" type="text" value="" onfocus="myFocusHandler(this);" onblur="myBlurHandler(this);" size="18" maxlength="50">
   <input type="submit" name="searchsubmit" class="button" value="Go" />
</form> 
</body>
<script>
function myFocusHandler(textField) {
   if (textField.value == defText)
      textField.value = "";
}

function myBlurHandler(textField) {
    if (textField.value == "")
       textField.value = defText;
}

var defText;
var defOptions = {
      "Website" : "Enter keywords...",
      "Employee Directory" : "Enter employee's first name...",
      "Publications Center" : "Enter Publication's Information..."
      // and any other options you may need
      };

function setDefault() {
   var sel = document.getElementById("el08"),
       input = document.getElementById("searchBox"),
       prevDefText = defText;

   defText = defOptions[sel.options[sel.selectedIndex].text] || "Enter search term...";
   if (prevDefText == undefined || input.value == prevDefText)
      input.value = defText;
}
</script>

可以通过使用模块模式的变体来减少对全局变量的使用，但这是另一天的问题。

表单的输入默认文本

1 个答案: