表单输入默认文本

发布于 2024-11-15 19:17:36 字数 1541 浏览 1 评论 0原文

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

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

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

“员工目录” = 输入员工的名字...< /em>

“出版物Center" = 输入出版物的信息...

这是我目前的代码：

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

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

原文

I desperately need to have my search form's default input text to change based on the user's selection in the form's select input. The current default input text is Enter Keywords… and stays the same no matter what option is selected. What I want, for example, is when the user selects "Employee Directory" to have the default input text for the search field to change to Enter Employee's First Name…

This is the desired input fields for each selection:

"Website" = Enter Keywords…

"Employee Directory" = Enter Employee's First Name…

"Publications Center" = Enter Publication's Information…

Here is my code as it sits currently:

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

Anybody with the expertise to help code this or offer suggestions, please do! Cheers!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

柒夜笙歌凉 2024-11-22 19:17:36

使用实际有效的代码进行了更新（仅在 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>

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

Updated with code that actually works (only tested in IE). This version notes when the selected search option changes and then updates the input if it was displaying the default prompt that went with the previously selected search option.

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

Could cut down on use of globals by using a variation of the module pattern or something, but that's an issue for another day.

回复收藏 0 原文

~没有更多了~