表单的输入默认文本答案

【问题标题】：Form's input default text表单的输入默认文本
【发布时间】：2011-09-16 01:02:10
【问题描述】：

我迫切需要根据用户在表单的选择输入中的选择来更改搜索表单的默认输入文本。当前的默认输入文本是 Enter Keywords... 并且无论选择什么选项都保持不变。例如，我想要的是当用户选择 "Employee Directory" 以将搜索字段的默认输入文本更改为 Enter Employee's First Name... p>

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

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

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

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

这是我目前的代码：

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

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

【问题讨论】：

标签： javascript forms search input field

【解决方案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>

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

【讨论】：

这似乎无法解决问题，今晚我会再摆弄一下。感谢您的帮助 - 我稍后会回复您。
是的，抱歉，正如我所说，它未经测试。当用户更改所选项目时，我忘记包含更新默认文本的代码。需要将onchange 添加到select 以检查input 当前是否显示先前选择的搜索选项的默认文本，如果是，则将其更改为新选择的搜索选项的文本。我希望这是有道理的。
这很有意义，我只是觉得我的 Javascript 不够熟练，无法编写它！我现在肯定会为您的所有辛勤工作为您提供这个问题的选定答案，如果您有动力，请在您有一两个空闲时间时尝试编写其他需要的代码。再次感谢~
@Eric - 我已经用一个绝对有效的版本更新了我的答案（我实际上测试了这个版本）。请注意，除了修复 JavaScript 之外，HTML 中还有一些小的变化：我在 body 中添加了一个 onload，在 input 元素中添加了一个 id。