Question

我有一个表单，当用户键入新值或用户在文本中进行更改时，我希望在数据库中更新每个输入文本。

为实现这一目标，我使用了三个事件：输入，更改和焦点。

我选择了输入来检测用户何时选择输入文本，然后检查输入文本中的原始文本是否已更改。

我使用change来检测用户是否通过bootstrap-datepicker.js修改了日期。

所以这是JQuery代码：

<script type="text/javascript">
                var timerid;
                $("input").on("input change",function(e){ //referencias: http://stackoverflow.com/a/2534107/1883256
                    //para ver que se active con el TAB, checar: http://stackoverflow.com/questions/14889732/how-to-trigger-an-event-after-hitting-tab-key-in-textbox
                    var currentId = $(this).attr('id');
                    var value = $(this).val();
                    //preguntar si el dato del input en donde está el cursor ha cambiado:
                    if($(this).data('lastval')!=value){
                        $(this).data('lastval',value);
                        nuevoValor=$(this).val();
                        clearTimeout(timerid);
                        timerid=setTimeout(function(){
                            var editform = $('#formedit2').serializeArray();
                            editform.push({name:'identifier',value:currentId});//http://stackoverflow.com/a/13362942/1883256
                            //agregando el ID a la serie de datos:
                            //alert(editform);
                            var url = $("#formedit2").attr('action');//con esto se llama al controlador correspondiente!
                            $('#'+currentId).addClass('loadinggif');
                            $.post(url, editform, function(data,status){
                                $('#formedit2 input').removeClass('loadinggif');
                                //alert(data);
                                if(data=='fail'){
                                    alert('No se pudo actualizar el campo. Status:' + status);
                                    $('#formedit2 input').removeClass('loadinggif');
                                }else if(data=='success'){
                                    alert('Dato actualizado exitosamente! Status: ' + status);
                                    $('#formedit2 input').removeClass('loadinggif');
                                    $('#'+currentId).closest('.form-group').addClass('has-success').addClass('has-feedback');
                                }else if(data=='timeout'){
                                    alert('El tiempo de espera se ha agotado. Recargue la página.');
                                    $('#formedit2 input').removeClass('loadinggif');
                                }else if(data=='error'){
                                    alert('Ha habido un error. Favor de intentar de nuevo más tarde. Data:'+data);
                                    $('#formedit2 input').removeClass('loadinggif');
                                    $('#'+currentId).closest('.form-group').addClass('has-error');
                                }
                                else if(data==400){
                                    alert('error! please check');
                                    $('#formedit2 input').removeClass('loadinggif');
                                    $('#'+currentId).closest('.form-group').addClass('has-error');                          
                                }else{
                                    $('#formedit2 input').removeClass('loadinggif');
                                    $('#'+currentId).closest('.form-group').addClass('has-error');
                                    alert('Unknown process. Status: '+status+'. Data: '+data);
                                }
                            });//fin de la función del post
                            //FIN DEL PROCEDIMIENTO DE ACTUALIZACIÓN DE LA INFO
                        },2500);//TIEMPO DE ESPERA PARA REALIZAR LOS CAMBIOS
                    };//fin del IF de si hubo cambios en el valor del Input
                });//fin de la parte del input          
        </script>

直到这里没问题，因为在用户停止输入以更新数据库中的数据后，脚本会监听并等待2.5秒。

现在我想听另一个用户输入TAB键的事件，以便继续下一个输入文本。为此，我使用焦点事件。

所以我把它添加到以下（焦点）：

$("input").on("input change focusout",function(e)

我的问题是，如果我键入内容然后我使用Tab键快速更改为下一个输入，则检查第一列是否会更新，然后我转到下一个，所以通过再次使用Tab键，我注意到并非每个输入的所有更改都会更新，而是第一个。

我希望脚本只启动一个事件。例如，如果我键入内容然后我停止，在2.5之后事件的计时器将启动更新过程，但如果我单击选项卡，则必须立即触发更新过程，并且必须取消其余过程。

我看到所有事件都被触发了，我该如何让一个事件处理更新过程？

Answer 1

我不确定我是否正确理解了这个问题，但似乎您可能会在事件处理程序中使用某种延迟并检查在此延迟期间是否按下了tab。如果是，则取消处理程序执行。这样你可以根据需要多次按下TAB，但只有在按下最后一个TAB后延迟时间到期时才会处理事件。

JQuery：如何监听多个事件，并且只为表单中的每个输入文本更改触发一个事件？

1 个答案: