jQuery: Как я могу увеличить поле ввода во время ввода?

Question

Мой текущий код, как это и на основе клик, не печатая на основе:

$(document).ready(function() 
{ 

$('#btn_send').on('click', function() { 

content_input_username = $('#input_username').val(); 

$.post('system/check_username.php', 
     { 
      'content_input_username':content_input_username 
     }, 
     function(responseText) 
     { 
      if(responseText == 'false') 
      { 
       $('#username_info').html('username available'); 
      } 

      if(responseText != 'false' && responseText != 'sql_error') 
      { 
       $('#username_info').html('user name not available'); 
      } 



     } 
    ); 

}); // /button-click 

}); 

Как я могу добиться того, что в поле ввода является постоянно подтверждено во время ввода текста? Что мне нужно изменить?

Answer 1

Это по существу решение Bart (go upvote!). Я хотел, чтобы у OP был полный пример кода и направить внимание от события keyup, которое, как мы думали, было неправильным способом.

function debounce(fn, delay) { 
    var timer = null; 
    return function() { 
    var context = this, args = arguments; 
    clearTimeout(timer); 
    timer = setTimeout(function() { 
     fn.apply(context, args); 
    }, delay); 
    }; 
} 

$(document).ready(function() { 
    $('#input_username').on('change input', debounce(function() { 
     content_input_username = $('#input_username').val(); 

     $.post('system/check_username.php', 
      { 
       'content_input_username':content_input_username 
      }, 
      function(responseText) 
      { 
       if(responseText == 'false') 
       { 
        $('#username_info').html('username available'); 
       } 

       if(responseText != 'false' && responseText != 'sql_error') 
       { 
        $('#username_info').html('user name not available'); 
       } 



      } 
     ); 

    }, 250)); 
}); 

Here - мой источник использования «ввода изменений».

Answer 2

Вы можете использовать обработчик события KeyUp

$('#input_username').on("keyup", function(){ 
    //do your validation here. 
    content_input_username = $('#input_username').val(); 

    $.post('system/check_username.php', 
    { 
     'content_input_username':content_input_username 
    }, 
    function(responseText) 
    { 
     if(responseText == 'false') 
     { 
      $('#username_info').html('username available'); 
     } 

     if(responseText != 'false' && responseText != 'sql_error') 
     { 
      $('#username_info').html('user name not available'); 
     } 

    }); 
}); 

Answer 3

<input type="text" onkeypress="validate()"> 

$(document).ready(function() 
{ 

function validate() { 

content_input_username = $('#input_username').val(); 

$.post('system/check_username.php', 
     { 
      'content_input_username':content_input_username 
     }, 
     function(responseText) 
     { 
      if(responseText == 'false') 
      { 
       $('#username_info').html('username available'); 
      } 

      if(responseText != 'false' && responseText != 'sql_error') 
      { 
       $('#username_info').html('user name not available'); 
      } 



     } 
    ); 

} 

}); 

Answer 4

2 вещи здесь.

Сначала вы должны изменить событие click для ввода или изменения (подробнее об этом позже).

Поскольку вы выполняете запрос ajax, это не идеально подходит для каждого нажатия клавиши, поэтому «изменение» является хорошей альтернативой, но оно срабатывает только тогда, когда вы теряете фокус на входе, что может сделать его довольно раздражающим.

«вход» на помощь. Событие ввода будет срабатывать для каждого нажатия клавиши, но вы должны принять некоторые соображения, поскольку, если я наберу «bart», он просто убьет 4 запроса с условием гонки, и это абсолютно плохо. Вы должны проверить валидацию так, вы делаете запрос, если пользователь перестает печатать, так что скажем, 3 секунды.

Также отметим, что «вход» не доступен на старых браузерах, но вы можете добавить изменения также для старых браузеров, как: .on('change input')

notes on: keyup это событие будет срабатывать даже использовать курсор для перемещения вправо влево или заменяя буква с той же буквой, в то время как вход будет срабатывать только при изменении ввода. Поэтому я буду держаться подальше от события keyup.