[英]detect whether a text area is being used with javascript
非常感谢所有尝试发送的人。 你们真棒! :)
我使用了@ jsfriend00解决方案,它实现了我的客户端浏览器缓存问题所需的功能。
嗨,我有一个关于javascript的问题:
想知道是否有一种方法可以检测用户是否正在使用文本区域,这意味着该用户正在向另一个用户发送消息,但还没有Enter键?
我一直在想,如果仅当用户不希望向其他用户发送消息时才使客户端浏览器缓存刷新,因为我可以使客户端浏览器的缓存刷新,因为很明显他们会因为自动输入而失去输入的内容,所以我可以解决我的私有网络流的缓存问题刷新。
例如说以下文本区域:
<html>
<title></title>
<head>
<script>
function autoRefresh(refreshPeriod) {
var obj = document.getElementById("create");
function refreshIfSafe() {
if (document.activeElement !== obj) {
window.location.reload();
} else {
setTimeout(refreshIfSafe, refreshPeriod);
}
}
setTimeout(refreshIfSafe, refreshPeriod);
}
autoRefresh(2 * 1000);
</script>
<?php echo smiley_js(); ?>
</head>
<body>
<?php echo form_open('controller/function') ?>
<p><label for="create">chat here:<span class="optional"></span></label>
<textarea name="create" id="create" onfocus="autoRefresh(this.id)" rows="3" cols="20"></textarea>
<?php echo form_error('create'); ?>
</p>
<?php echo form_submit('submit','chat');?>
<?php echo form_close();?>
</body>
</html>
如果您想知道焦点当前是否在文本区域中,则可以通过检查document.activeElement是否是您的文本区域对象来进行检查。
var obj = document.getElementById("myTextArea");
if (document.activeElement === obj) {
// focus is currently in my textarea
}
您可以看到一个有效的演示: http : //jsfiddle.net/jfriend00/NCSed/
如果您想知道的是何时修改文本区域,则以下代码将在文本区域上安装更改处理程序,并在更改文本区域中的文本时调用事件处理程序。 此代码适用于textarea
对象或input
对象。 与其他方法不同,它捕获通过键入,通过鼠标编辑,剪切,复制,粘贴和拖放来完成的更改。 然后,您可以告诉用户何时键入或何时键入任何文本。 这是此代码的有效测试引擎: http : //jsfiddle.net/jfriend00/xxCkm/ 。
并且,这是代码:
// add event cross browser
function addEvent(elem, event, fn) {
if (elem.addEventListener) {
elem.addEventListener(event, fn, false);
} else {
elem.attachEvent("on" + event, function() {
// set the this pointer same as addEventListener when fn is called
return(fn.call(elem, window.event));
});
}
}
function onChange(elem, fn, data) {
var priorValue = elem.value;
function checkNotify(e, delay) {
// log('checkNotify - ' + e.type);
if (elem.value != priorValue) {
priorValue = elem.value;
fn.call(this, e, data);
} else if (delay) {
// the actual data change happens aftersome events
// so we queue a check for after
setTimeout(function() {checkNotify(e, false)}, 1);
}
}
// Which events to monitor
// the boolean value is whether we have to
// re-check after the event with a setTimeout()
var events = [
"keyup", false,
"blur", false,
"focus", false,
"drop", true,
"change", false,
"input", false,
"paste", true,
"cut", true,
"copy", true
];
for (var i = 0; i < events.length; i+=2) {
(function(i) {
addEvent(elem, events[i], function(e) {
checkNotify(e, events[i+1]);
});
})(i);
}
}
然后,示例用法如下所示:
var obj = document.getElementById("test");
onChange(obj, function(e) {
// your code goes here for whatever you want to do
// when the change handler is called
console.log("change - " + e.type);
});
查看您评论中的代码,我建议这样做:
<script>
function autoRefresh(refreshPeriod) {
var obj = document.getElementById("create");
function refreshIfSafe() {
if (document.activeElement !== obj) {
window.location.reload();
} else {
setTimeout(refreshIfSafe, refreshPeriod);
}
}
setTimeout(refreshIfSafe, refreshPeriod);
}
autoRefresh(2 * 1000);
</script>
var textarea = document.getElementById("create") ;
textarea.onfocus = function() {
// Do something while the textarea being used by a user
};
textarea.onblur = function() {
// Do something while the textarea not being used by a user
};
这个链接可能是您想要查看Tim Down的答案的东西。
实际上,这是我要说jQuery使它变得更容易的极少数情况之一。
if($("#create").is(":focus")) {
// element is in use
}
另一种可能是这样的:
document.body.onfocus = function(e) {
e = e || window.event;
window.elementWithFocus = e.target || e.srcElement;
}
...
if( document.getElementById('create') == window.elementWithFocus) {
// element is in use
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.