如何使用 javascript/jquery 在 30 分钟内没有使用表单字段时显示警报消息?

发布于 2024-12-25 11:29:25 字数 98 浏览 2 评论 0原文

我有一个带有几个输入字段的表单,我想要一个脚本,如果在一定时间范围后没有使用任何字段,则会显示一条弹出消息,询问“你还在吗?”或类似的东西。

是否可以?请指教,谢谢!

I have a form with couple of input fields and i want a script that will show a pop up message IF no field is used after a certain time-frame, asking "Are you still there?" or something like that.

Is it possible? Please advice, thanks!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

五里雾 2025-01-01 11:29:25

您需要启动一个三十分钟的计时器,并将 change 事件附加到您的所有字段。更改时,您希望清除当前计时器,并创建一个新计时器,再计时 30 分钟。

例如,它会是这样的:

$('input[type=text]').bind('change', function (e) {
    // .. Triggered every time a form text field is changed
    // .. Do stuff here
});

对于计时器,您只需使用 settimeout

You'll want to start a timer for thirty minutes and attach a change event to all of your fields. On change, you want to erase the current timer, and create a new one for another 30 minutes.

For example, it would be something like this:

$('input[type=text]').bind('change', function (e) {
    // .. Triggered every time a form text field is changed
    // .. Do stuff here
});

And for the timer, you'd just use settimeout

-小熊_ 2025-01-01 11:29:25

这是 JsFiddle 中的完整示例:

我建议使用 setTimeOut 来调用您想要显示消息或执行任何您想要执行的操作的方法。然后,在所有输入类型的更改事件上尝试重置超时。以下是模拟此场景的 JS 代码:

// Timer for 3 seconds to call formTimeOut function 
var _timer = setTimeout("formTimeOut()",3000);

$(function(){

    // Monitor Value change of Inputs in your HTML
    $("input").change(function(){

        // Clear previous timer 
        clearTimeout(_timer);
        // Reset the timer to re-run after 3 seconds.
        _timer = setTimeout("formTimeOut()",3000);

    });
});

// This is the function that will run after time out
function formTimeOut(){

    // Timeout Logic goes here
    alert("Are you there?");
}

您可以将 $("input") 更改为可能适合您的项目的任何条件。

Here is full sample in JsFiddle:

What I recommend is using setTimeOut to call a method that you want to display a message or do whatever action you wanted to do. Then on change event on all your input types try to reset the TimeOut. Here is JS Code that simulates this scenario:

// Timer for 3 seconds to call formTimeOut function 
var _timer = setTimeout("formTimeOut()",3000);

$(function(){

    // Monitor Value change of Inputs in your HTML
    $("input").change(function(){

        // Clear previous timer 
        clearTimeout(_timer);
        // Reset the timer to re-run after 3 seconds.
        _timer = setTimeout("formTimeOut()",3000);

    });
});

// This is the function that will run after time out
function formTimeOut(){

    // Timeout Logic goes here
    alert("Are you there?");
}

You can change $("input") to any criteria that may fit your project.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文