Добрый день.
Есть такой код:
$('.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), пошла отправка на сервер? Или еще как нибудь ограничить число запросов?
Проще(и разумнее) всего в таких случаях пользоваться "отсечкой" по времени - например 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 />
Ваш код выполняется после каждого нажатия на клавишу, а ajax отправляется если длина значения инпута больше 5 символов (в том числе и пробелов). Замените событие, вызывающее отправку на .change() или поставьте его на клик по кнопке, например.
Попробуйте поставить ограничение на 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);
}
}):
});
Хорошим способом будет просто отфильтровать нажатия, и ничего не делать если пользователь например стрелочкой передвинул курсор чтобы исправить букву.
$('.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' />
Используйте blur, после того как закончил вносить текст и мышка вышла из поля input, только тогда отсылать.
$('.name').blur(function(e){
e.preventDefault();
$.ajax({
url: url,
type: "post",
success: function(data)
{
console.log(data);
}
});
});
Например, можно вызывать функцию при нажатии на пробел:
$('.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
, это не функция, а свойство, поэтому скобки быть не должны.
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Уважаемые знатоки React! Подскажите, как правильно организовать подключение и использование компонента, который хранится в отдельном файле?...
При нажатии на кнопку «Отправить» в форме, iPhone игнорирует обязательные поля input с атрибутом required и отправляет форму, как исправить?
Делаю так не работает, в чем может быть проблема?