Запуск функции при длине ввода > 3 символов

#jquery

Вопрос:

Часть 1: Я хочу, чтобы .highlight() функция была активна только тогда, когда длина ввода больше 3. После 3 символов я хочу, чтобы при каждом нажатии клавиши искалось это значение и применялась .highlight() функция (которая отлично работает при использовании статического значения). Я использую ее как функцию поиска на странице.

Итак, вот что я пробовал, но безуспешно:

 <script type="text/javascript">

$(document).ready(function() {
  if($("#search_doc_input").length > 3) {
    $('#search_doc_input').keydown(function() {
      $(body).highlight($(this).val()); 
    });
  }
});

</script>

Часть 2: Кроме того, каким был бы наилучший способ, как только функция выделения активируется для определенного значения, перейти к первому экземпляру нового <span class="highlight"> добавленного (что и делает функция .highlight()))?

Ответ №1:

Пример скрипки:

http://jsfiddle.net/uZVGb/1/

Обновлено:

http://jsfiddle.net/8aM2d/1/

1. Это отлично работает, но останавливается на 4 символах! Любой символ, введенный после, не работает … должен ли он быть заключен в цикл? Как бы вы на это посмотрели? Спасибо!

2. Кстати, scrollTo не работает, консоль показывает «Неперехваченную ошибку типа: не удается прочитать свойство ‘top’, равное нулю»

3. Привет, я только что попробовал в FF7 / mac, Safari5 / mac, Opera / mac, IE6, и это сработало без ошибок (после удаления console.logs).

4. Хорошо, итак, вот в чем дело. Сначала она останавливается после 4 символов, поэтому независимо от того, что вы делаете после, это не работает. Я обновил ваш jsfiddle, если вы введете hell, вы прокрутите вниз до первого. Если вы продолжаете использовать HellY, он не прокручивается. Есть ли там цикл, который запускал бы скрипт каждый раз, когда добавляется или удаляется новый ключ? jsfiddle.net/8aM2d

5. Кроме того, часть прокрутки работает в вашем примере, но поскольку класс добавлен с помощью .highlight(), я предполагаю, что скрипт не видит его при загрузке страницы. Что вы думаете?

Ответ №2:

if($("#search_doc_input").length > 3) на самом деле проверит, соответствует ли вашему селектору более 3 элементов dom, которые являются идентификатором, так что этого никогда не должно произойти.

Вы, вероятно, захотите посмотреть на длину значения, которое находится во входных данных, вот так :

 if($("#search_doc_input").val().length > 3)

Ответ №3:

Я думаю, ваша проблема в том, что проверка длины должна быть выполнена в keydown перед вызовом highlight.

То, как у вас сейчас работает нажатие клавиши, не будет подключено, если длина меньше 3. Что, вероятно, верно при загрузке страницы

1. если я использую значение по умолчанию (для поля ввода) длиной > 3, функция все равно не запускается…

2. Вы имели в виду сделать $(‘body’) вместо $ (body)? Также я бы сначала проверил, $ (‘body’).highlight(‘foo’), чтобы увидеть, выполняет ли плагин highlight свою работу?

Ответ №4:

Вам нужно поместить всю вашу логику в keyup обработчик событий.

Чтобы также проверить загрузку страницы, вызовите keyup() после добавления обработчика, чтобы немедленно запустить его.