Nie byłoby łatwiej zwykłym onchange()? Tylko nie wiem czy da się monitorować kilka pól i dodać do tego jakiś timeout
Ale wygooglałem funkcje o których napisałeś i chyba znalazłem skrypt, który powinien mi pasować, tylko jak zwykle mam z problem ze zrozumieniem tego dziwnego js
Oto kod, który skleiłem, w pewnym sensie działa, po wpisaniu tekstu w pole1 czeka 1500 ms i submituje formularz, tylko że reakcja jest tylko jeśli wpisze dane w pole1.
Zapewne zmiany w samym skrypcie jQuery nie są potrzebne, głównie chodzi o to wywołanie, które umieściłem pod formularzem.
Czy mógłby ktoś przerobić to wywołanie tak żeby reakcja i timeout były wspólne dla wszystkich 5 pól (no i oczywiście żeby funkcja clearPreviousTimeout() działała gdy są wprowadzane zmiany w jakimkolwiek z tych 5 pól)
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
jQuery.fn.handleKeyboardChange = function(nDelay)
{
function shouldIgnore(event)
{
var mapIgnoredKeys = {
9:true, // Tab
16:true, 17:true, 18:true, // Shift, Alt, Ctrl
37:true, 38:true, 39:true, 40:true, // Arrows
91:true, 92:true, 93:true // Windows keys
};
return mapIgnoredKeys[event.which];
}
function fireChange($element)
{
if( $element.val() != jQuery.data($element[0], "valueLast") )
{
jQuery.data($element[0], "valueLast", $element.val())
$element.trigger("change");
}
}
var timeout = 0;
function clearPreviousTimeout()
{
if( timeout )
{
clearTimeout(timeout);
}
}
return this
.keydown(function(event)
{
if( shouldIgnore(event) ) return;
clearPreviousTimeout();
return null;
})
.keyup(function(event)
{
if( shouldIgnore(event) ) return;
clearPreviousTimeout();
var $self = $(this);
timeout = setTimeout(function(){ fireChange($self) }, nDelay);
})
.change(function()
{
fireChange($(this));
})
;
}
</script>
<form method="post" name="form" >
<input type="text" id="pole1" name="pole1">
<input type="text" id="pole2" name="pole2">
<input type="text" id="pole3" name="pole3">
<input type="text" id="pole4" name="pole4">
<input type="text" id="pole5" name="pole5">
</form>
<script>
$("#pole1").handleKeyboardChange(1500).change(function()
{
document.forms["form"].submit();
});
</script>
<?
//pokaż wynik post'a
echo "<pre>";
print_r($_POST);
echo "</pre>";
?>