Форма ввода текста по умолчанию - PullRequest
Новая
       12

Форма ввода текста по умолчанию

2 голосов
/ 16 июня 2011

Мне отчаянно нужно, чтобы текст ввода моей формы поиска по умолчанию изменялся в зависимости от выбора пользователя в форме выбора ввода. Текущий вводимый текст по умолчанию - Введите ключевые слова… и остается неизменным независимо от того, какая опция выбрана. Например, я хочу, чтобы пользователь выбирал «Каталог сотрудника» , чтобы в качестве поля ввода по умолчанию для поля поиска было изменено значение Введите имя сотрудника…

Это необходимые поля ввода для каждого выбора:

"Веб-сайт" = Введите ключевые слова…

«Справочник сотрудника» = Введите имя сотрудника…

"Центр публикаций" = Ввод информации о публикации ...

Вот мой код в том виде, в котором он сейчас находится: 

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

Любой, кто имеет опыт, чтобы помочь кодировать это или предложить предложения, пожалуйста! Ура!

1 Ответ

2 голосов
/ 16 июня 2011

Обновлено с кодом, который на самом деле работает (проверено только в 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>

Может сократить использование глобальных переменных с помощью варианташаблона модуля или чего-то еще, но это проблема для другого дня.

...