检测文本区域是否与javascript一起使用
[英]detect whether a text area is being used with javascript
问题描述
MAJOR THANKS TO EVERYONE WHO POSTED TO TRY TO HELP. 
非常感谢所有尝试发送的人。 YOU GUYS ARE AWESOME! 你们真棒！ :) :)
I used @jsfriend00 solution and it accomplished the functionality I needed for client browser cache problem. 我使用了@ jsfriend00解决方案，它实现了我的客户端浏览器缓存问题所需的功能。
Hi I have a question regarding javascript: 嗨，我有一个关于javascript的问题：
Wondering if there is a way to detect whether a textarea is being used by a user meaning the user is messaging another user but there isn't yet an enter keystroke? 想知道是否有一种方法可以检测用户是否正在使用文本区域，这意味着该用户正在向另一个用户发送消息，但还没有Enter键？
I've been thinking I can solve my cache issue with my private networking stream if I can get the client browser cache to refresh only if the user is not attempting to message another user because then obviously they loose what they're typing because of automatic refresh. 我一直在想，如果仅当用户不希望向其他用户发送消息时才使客户端浏览器缓存刷新，因为我可以使客户端浏览器的缓存刷新，因为很明显他们会因为自动输入而失去输入的内容，所以我可以解决我的私有网络流的缓存问题刷新。
Say for example the following textarea: 例如说以下文本区域：
<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>
4 个解决方案
解决方案1
2 已采纳 2012-09-14 03:29:59
If what you want to know is whether the focus is currently in your textarea, then you can just check that by checking to see if document.activeElement is your textarea object or not. 如果您想知道焦点当前是否在文本区域中，则可以通过检查document.activeElement是否是您的文本区域对象来进行检查。
var obj = document.getElementById("myTextArea");
if (document.activeElement === obj) {
// focus is currently in my textarea
}
You can see a working demo: http://jsfiddle.net/jfriend00/NCSed/ 您可以看到一个有效的演示： http : //jsfiddle.net/jfriend00/NCSed/
If what you want to know is when your textarea is being modified, here is some code that will install a change handler on your textarea and call your event handler anytime the text in the textarea is changed. 如果您想知道的是何时修改文本区域，则以下代码将在文本区域上安装更改处理程序，并在更改文本区域中的文本时调用事件处理程序。 This code works with either textarea objects or input objects. 此代码适用于textarea对象或input对象。 Unlike other methods, this captures changes done by typing, by mouse editing, cut, copy, paste and drag/drop. 与其他方法不同，它捕获通过键入，通过鼠标编辑，剪切，复制，粘贴和拖放来完成的更改。 You can then tell when the user is typing or when any text has been typed. 然后，您可以告诉用户何时键入或何时键入任何文本。 Here's a working test engine for this code: http://jsfiddle.net/jfriend00/xxCkm/ . 这是此代码的有效测试引擎： http : //jsfiddle.net/jfriend00/xxCkm/ 。
And, here's the code: 并且，这是代码：
// 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);
}
}
Then, sample usage is like this: 然后，示例用法如下所示：
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);
});
Looking at the code in your comment, I would suggest this: 查看您评论中的代码，我建议这样做：
<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>
解决方案2
0 2012-09-14 03:08:55
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
};
解决方案3
0 2012-09-14 03:25:26
this link is may be the thing you want look at Tim Down's answer. 这个链接可能是您想要查看Tim Down的答案的东西。
Javascript OnChange detection for textarea 文本区域的Javascript OnChange检测
解决方案4
-1 2012-09-14 03:07:34
This is actually one of the very rare cases where I'm going to say jQuery makes it easier. 实际上，这是我要说jQuery使它变得更容易的极少数情况之一。
if($("#create").is(":focus")) {
// element is in use
}
The alternative would be something like: 另一种可能是这样的：
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.