1

Добрый день.

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

$('.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), пошла отправка на сервер? Или еще как нибудь ограничить число запросов?

1
  • А почему просто не использовать отсечку по времени? Если после 5ти символов пользователь тыкает на кнопки - запускаем таймер(на каждое нажатие - перезапускаем) в секунду например, после которого отправляем данные на сервер.
    – SLy_huh
    19 янв 2017 в 9:12

6 ответов 6

1

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

1
  • До этого так и работало. Но это оказалось не удобно. По этому решил изменить все это
    – Alex_01
    19 янв 2017 в 8:51
1

Попробуйте поставить ограничение на 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);
        }
     }):
  });
1

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

$('.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' />

3
  • "Uncaught SyntaxError: Unexpected token :"
    – Alex_01
    19 янв 2017 в 8:54
  • @Alex_01 это у вас там в вопросе опечатка, не увидел так и скопировал) Исправил пример
    – Moonvvell
    19 янв 2017 в 8:57
  • Моя вина) спасибо за ответ. Смешал ваш способ, со способом выше.
    – Alex_01
    19 янв 2017 в 9:39
0

Проще(и разумнее) всего в таких случаях пользоваться "отсечкой" по времени - например 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 />

2
  • Вот! Это то что нужно.
    – Alex_01
    19 янв 2017 в 9:38
  • @Alex_01 отлично, я рад, что мой вариант Вам пригодился =)
    – SLy_huh
    19 янв 2017 в 9:41
0

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

$('.name').blur(function(e){
    e.preventDefault();   
        $.ajax({
            url: url,
            type: "post",
            success: function(data)
            {
                console.log(data);
            }
         });
});
1
  • Это удобно, если с пк вводить текст, но с телефона не удобно получается
    – Alex_01
    19 янв 2017 в 8:52
0

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

$('.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, это не функция, а свойство, поэтому скобки быть не должны.

1
  • А как быть после последнего слова? Ставить и стирать пробел?)) ТОчно, ошибку допустил с этим свойством)
    – Alex_01
    19 янв 2017 в 8:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.