表格's输入默认文本

Form's input default text

本文关键字：输入 默认 文本 表格      更新时间：2023-09-26

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

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

"网站"=输入关键字…

"员工目录"=输入员工的名字…

"出版物中心"=输入出版物信息…

这是我目前的代码：

<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>

任何有专业知识的人都可以帮助编码或提供建议，请这样做！干杯

用实际工作的代码更新（仅在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>

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

相关文章：