Как ограничить keyup в jQuery?

283
20 января 2017, 09:21

Добрый день.

Есть такой код:

$('.name').keyup(function(e){
    e.preventDefault();
    var inputVal = $(this).val();
    if(inputVal.length > 5)
    {
        $.ajax({
            url: url,
            type: "post",
            success: function(data)
            {
                console.log(data);
            }
         }):
   });

Работает нормально, но после вводо 5 символов, даже если не вводить ничего, а просто передвигать указатель (например что б стереть лишнюю букву), на сервер уходят запросы. Как можно сделать, что бы после ввода всего слова (например Смартфон Apple Iphone 7), пошла отправка на сервер? Или еще как нибудь ограничить число запросов?

Answer 1

Проще(и разумнее) всего в таких случаях пользоваться "отсечкой" по времени - например setTimeout. Каждое нажатие пользователя перезапускает таймер, по прошествии которого отправляется запрос:

var timer; //создаем переменную под наш таймер 
$('input').on('input', function(){  
  var val = $(this).val(); 
  clearTimeout(timer); //если был ввод, перезапускаем наш таймер 
  timer = setTimeout(function(){ 
      (val.length >= 5) && sendToServer(val); //если таймер отработал, и введено более 5ти символов, отправляем запрос 
  }, 700);// устанавливаем интервал ожидания ввода в миллисекундах, 700 более менее адекватно по моему 
}) 
function sendToServer(val){ 
  console.log(val);// сюда пишем код отправки на сервер, в нашем примере просто выводим в консоль 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input />

Answer 2

Ваш код выполняется после каждого нажатия на клавишу, а ajax отправляется если длина значения инпута больше 5 символов (в том числе и пробелов). Замените событие, вызывающее отправку на .change() или поставьте его на клик по кнопке, например.

Answer 3

Попробуйте поставить ограничение на keyCode >= 65

$('.name').keyup(function(e){
e.preventDefault();
var inputVal = $(this).val();
if(inputVal.length() > 5 && (e.keyCode >= 65))
{
    $.ajax({
        url: url,
        type: "post",
        success: function(data)
        {
            console.log(data);
        }
     }):
  });
Answer 4

Хорошим способом будет просто отфильтровать нажатия, и ничего не делать если пользователь например стрелочкой передвинул курсор чтобы исправить букву.

$('.name').keyup(function(e) { 
  e.preventDefault(); 
  var inputVal = $(this).val(); 
  switch (e.keyCode) { // Игнорируем эти клавиши 
    case 13: // enter  
    case 37: // left  
    case 38: // up  
    case 39: // right  
    case 40: // down  
      break; 
    default: 
      if (inputVal.length > 5) { 
        $.ajax({ 
          url: url, 
          type: "post", 
          success: function(data) { 
            console.log(data); 
          } 
        }); 
      } 
  } 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input class='name' />

Answer 5

Используйте blur, после того как закончил вносить текст и мышка вышла из поля input, только тогда отсылать.

$('.name').blur(function(e){
    e.preventDefault();   
        $.ajax({
            url: url,
            type: "post",
            success: function(data)
            {
                console.log(data);
            }
         });
});
Answer 6

Например, можно вызывать функцию при нажатии на пробел:

$('.name').keyup(function(e) { 
  e.preventDefault(); 
  var inputVal = $(this).val(); 
  if (inputVal.length > 5) { 
    if (e.keyCode == 32) { 
      console.log('spacebar and length>5') 
    } 
  } 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input class='name'>

Так-же по коду можно отфильтровать клавиши стрелок, они имеют коды 37, 38, 39, 40

NB. Кстати у вас ошибка в коде length, это не функция, а свойство, поэтому скобки быть не должны.

READ ALSO
Как в ReactJS организовать подключение компонента из другого файла?

Как в ReactJS организовать подключение компонента из другого файла?

Уважаемые знатоки React! Подскажите, как правильно организовать подключение и использование компонента, который хранится в отдельном файле?...

406
Чем заменить setAttribute в IE?

Чем заменить setAttribute в IE?

Работает везде кроме IE

262
iphone игнорирует required в input html

iphone игнорирует required в input html

При нажатии на кнопку «Отправить» в форме, iPhone игнорирует обязательные поля input с атрибутом required и отправляет форму, как исправить?

329
необходимо что бы блок исчезал через несколько секунд

необходимо что бы блок исчезал через несколько секунд

Делаю так не работает, в чем может быть проблема?

249