编辑 Summernote 时会话终止
Session killed while editing Summernote
如果计算机无人看管,我的视图有一行 return 到登录屏幕:
<meta http-equiv="refresh" content="120; url=/auth/login/" />
问题是如果我在 Summernote 盒子里写太久,会话就会结束。这是一个很长的文本,编辑它很容易超过 2 分钟。
如果用户在该 summernote 中使用键盘,如何避免终止会话?
谢谢!
我们可以在 JavaScript.
中处理重定向,而不是使用 meta
标签来处理重定向
const sn = document.getElementById('summernote');
let redirecTimer, stopTypingTimer;
sn.addEventListener('keyup', function() {
console.log(this.value);
/* Clear previous timers to prevent overlaps */
stopTimer(redirecTimer);
stopTimer(stopTypingTimer);
stopTypingTimer = window.setTimeout(function() {
console.log('Stopped Typing');
startTimer();
}, 5000); // Assume it takes 5 secs for a user to stop typing
});
function startTimer() {
redirecTimer = window.setTimeout(function() {
console.log("User is not typing. So Redirect..");
//window.location = "http://www.google.com";
}, 3000); // Redirect in 3 seconds. For 2 minutes set it to 120000
}
function stopTimer(timer) {
clearTimeout(timer);
}
<textarea id="summernote"></textarea>
更新: 将事件应用于 DOM
中的所有元素
const sn = document.getElementById('summernote');
let redirecTimer, stopTypingTimer;
/* Extend the events as per the need and elements you have in DOM.
`change` and `keyup` should capture all possible input elements
*/
['change', 'keyup'].forEach(function(e) {
document.addEventListener(e, function() {
console.log('User is interacting with the page');
/* Clear previous timers to prevent overlaps */
stopTimer(redirecTimer);
stopTimer(stopTypingTimer);
stopTypingTimer = window.setTimeout(function() {
console.log('Stopped Typing');
startTimer();
}, 5000); // Assume it takes 5 secs for a user to stop typing
});
});
function startTimer() {
redirecTimer = window.setTimeout(function() {
console.log("User is not typing. So Redirect..");
//window.location = "http://www.google.com";
}, 3000); // Redirect in 3 seconds. For 2 minutes set it to 120000
}
function stopTimer(timer) {
clearTimeout(timer);
}
<textarea id="summernote"></textarea>
<input type="checkbox">Hi
<input type="text"/>
<input type="radio"/>I am Radio button
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>
如果计算机无人看管,我的视图有一行 return 到登录屏幕:
<meta http-equiv="refresh" content="120; url=/auth/login/" />
问题是如果我在 Summernote 盒子里写太久,会话就会结束。这是一个很长的文本,编辑它很容易超过 2 分钟。 如果用户在该 summernote 中使用键盘,如何避免终止会话?
谢谢!
我们可以在 JavaScript.
中处理重定向,而不是使用meta
标签来处理重定向
const sn = document.getElementById('summernote');
let redirecTimer, stopTypingTimer;
sn.addEventListener('keyup', function() {
console.log(this.value);
/* Clear previous timers to prevent overlaps */
stopTimer(redirecTimer);
stopTimer(stopTypingTimer);
stopTypingTimer = window.setTimeout(function() {
console.log('Stopped Typing');
startTimer();
}, 5000); // Assume it takes 5 secs for a user to stop typing
});
function startTimer() {
redirecTimer = window.setTimeout(function() {
console.log("User is not typing. So Redirect..");
//window.location = "http://www.google.com";
}, 3000); // Redirect in 3 seconds. For 2 minutes set it to 120000
}
function stopTimer(timer) {
clearTimeout(timer);
}
<textarea id="summernote"></textarea>
更新: 将事件应用于 DOM
中的所有元素const sn = document.getElementById('summernote');
let redirecTimer, stopTypingTimer;
/* Extend the events as per the need and elements you have in DOM.
`change` and `keyup` should capture all possible input elements
*/
['change', 'keyup'].forEach(function(e) {
document.addEventListener(e, function() {
console.log('User is interacting with the page');
/* Clear previous timers to prevent overlaps */
stopTimer(redirecTimer);
stopTimer(stopTypingTimer);
stopTypingTimer = window.setTimeout(function() {
console.log('Stopped Typing');
startTimer();
}, 5000); // Assume it takes 5 secs for a user to stop typing
});
});
function startTimer() {
redirecTimer = window.setTimeout(function() {
console.log("User is not typing. So Redirect..");
//window.location = "http://www.google.com";
}, 3000); // Redirect in 3 seconds. For 2 minutes set it to 120000
}
function stopTimer(timer) {
clearTimeout(timer);
}
<textarea id="summernote"></textarea>
<input type="checkbox">Hi
<input type="text"/>
<input type="radio"/>I am Radio button
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>