focus in javascript
Trying to use onfocus , onfocusout, or finding which element has focus has lead to a problem. In the program I give at the end, if you click out of a input element I can not find where the focus goes. FF does not do both things - focus out and focus on at the same time. I have tried multitude ways of trying to find where focus goes when leaving this element. Have not tried oither elements.
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="padding-left: 20px">
<input onfocusout="myFunction(0);" ><br><br>
<input onfocusout="myFunction(1);" ><br><br>
<input onfocusout="myFunction(2);" ><br><br>
<input onfocusout="myFunction(3);" >
<script>
function myFunction(top){
alert(top);
var bottom = document.activeElement.id;
alert(bottom);
}
</script>
</body>
</html>Trying to use onfocus , onfocusout, or finding which element has focus has lead to a problem. In the program I give at the end, if you click out of a input element I can not find where the focus goes. FF does not do both things - focus out and focus on at the same time. I have tried multitude ways of trying to find where focus goes when leaving this element. Have not tried oither elements.
My code:
<pre><nowiki><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="padding-left: 20px">
<input onfocusout="myFunction(0);" ><br><br>
<input onfocusout="myFunction(1);" ><br><br>
<input onfocusout="myFunction(2);" ><br><br>
<input onfocusout="myFunction(3);" >
<script>
function myFunction(top){
alert(top);
var bottom = document.activeElement.id;
alert(bottom);
}
</script>
</body>
</html></nowiki></pre><br>
Modified by cor-el
All Replies (1)
Try to ask advice on a web development oriented forum.
This might be easier to see what is happening.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="padding-left: 20px">
<input onfocusin="myFunction('I:0');" onfocusout="myFunction('O:0');" ><br><br>
<input onfocusin="myFunction('I:1');" onfocusout="myFunction('O:1');" ><br><br>
<input onfocusin="myFunction('I:2');" onfocusout="myFunction('O:2');" ><br><br>
<input onfocusin="myFunction('I:3');" onfocusout="myFunction('O:3');" ><br><br>
<textarea id="output" cols="100" rows="30"></textarea>
<script>
function myFunction(top){
document.querySelector('#output').value+=top+' :: ';
var bottom = document.activeElement.nodeName;
document.querySelector('#output').value+=bottom+'\n';
}
</script>
</body>
</html>