Hello & Thanks ;
On a doubleClick ‘how can I tell which element has the focus’ .
Thanks for your help !
Just check the document.activeElement property 
Thanks ,
Now finding that there is such a thing ,
I googled and found an example:
<html>
<body onclick="myFunction()">
<p>Click anywhere in the document to display the active element.</p>
<input type="text" value="An input field">
<button>A Button</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.activeElement.tagName;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Thanks
1 Like
Thanks,
Will this work in all Browsers ?
Thanks
Thanks All , but:
The problem with ‘document.activeElement.tagName’ is that
for p element it returns ‘BODY’ .
But I want to know which p has focus .
Pls, How can this be done ?
Here is the code I am working with .
Check here:
window.addEventListener("keydown", onPress_ENTER, false);
// and here:
function onPress_ENTER
// I am thinking of doing this:
function onEnterKeyUp(e)
// But I can't figure out how to put it all together .
I tried using textArea (instead of p ) but the problem with that is that I have a ‘Save This Page’ Button ;
see: function saveAs(filename, allHtml) ,
but textArea can’t be saved .
Pls, help me with this , I have many many many diff things , but no go .
Here is the whole code:
<!DOCTYPE html>
<html>
<!-- Go To https://www.google.com/search?num=20&newwindow=1&hl=en&authuser=0&ei=XetDXJKlG46GtQXV1J9Q&q=html5+css+js&oq=html5+css+js&gs_l=psy-ab.12..35i39j0j0i22i30l6j0i22i10i30j0i22i30.239301.283270..287372...2.0..0.112.3082.19j14......0....1..gws-wiz.....6..0i71j0i13i30j0i8i13i30j0i131j0i20i263.RsTbO1V_iYY -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>myShortStory.html</title>
<style >
body {
font-family: Comic Sans MS;
height: 100%;
margin: 0 auto;
padding:0;
background: #F2F4F4 ;
}
html {
height: 100%;
margin: 0 auto;
padding:0;
}
.Table
{
margin: 0 auto;
padding:0;
}
#p_ah {
fontsize: 16;
color: DarkGreen;
}
#p_tgh {
fontsize: 12px;
color: #34495E ;
}
</style>
</head>
<body onload="documentURL()">
<!-- Run me 1st -->
<div class="Table" style="font-family: Comic Sans MS; fontsize: 12px; ">
<!-- ============NewRow============== -->
<div id="Row1" style="border:1px solid red; text-align: center;">
<div id="Row1Cell1">
<p contenteditable="true" id="mainHeading" style="fontsize: 16; color: DarkGreen;">MainHeading</p>
</div>
<!-- <div class="Cell" -->
</div>
<!-- ============NewRow============== -->
<div id="container">
<div id="Row2" style="border:1px solid green">
<!-- <div id="Row2Cell1">
<p contenteditable="" style="color:#5886BC;">notes</p>
</div>
-->
<div id="Row2Cell1">
<p contenteditable="" id="p_ah" style="fontsize: 16px; color: DarkGreen;">Heading</p>
<p contenteditable="" id="p_tgh" style="fontsize: 12px; color: #34495E ;">Text Paragraph</p>
</div> <!-- <div class="Cell" -->
</div> <!-- <div class="Row" -->
</div> <!-- id="container" -->
<!-- ============NewRow============== -->
<div id="Row3" style="border:1px solid blue; text-align: center;">
<div id="Row3Cell1">
<br>
<button onclick="createArticleHeading()">Add Heading</button>
<button onclick="createTextArea()">Add Text Paragraph</button>
<form action="http://google.com" target="_blank" style="display: inline;">
<input type="submit" value="Search Google" />
</form>
<button onclick="saveAs(filename, allHtml)">Save This Page</button>
<p id="currentPage_Address" style="fontsize: 12px; color: #34495E;"> </p>
</div> <!-- id="Row3Cell1" -->
</div> <!-- <div class="Row" -->
</div> <!-- <div class="Table"> -->
<script>
var p_tgh = "";
var pp_tgh = "";
var p_tghCount = 1;
var p_ah = "";
var pp_ah = "";
var p_ahCount = 1;
var ArticleHeading = "Heading";
var TextParagraph = "Text Paragraph";
var ButtonParagraph = "New Link";
var document_URL;
const filename = "myStory.html";
var allHtml = document.documentElement.outerHTML;
var document_URL;
function documentURL() {
document_URL = document.URL;
document.getElementById("currentPage_Address").innerHTML = document_URL;
window.addEventListener("keydown", onPress_ENTER, false);
// window.addEventListener("keyup", onEnterKeyUp, false);
}
</script>
<script>
function onPress_ENTER(event){
var keyPressed = event.keyCode || event.which;
//if ENTER is pressed
if(keyPressed==13)
{
// Good here:
event.preventDefault();
stopImmediatePropagation();
// Do stuff here too:
}
else
{
return false;
}
}
</script>
<script>
function onEnterKeyUp(e){
var keyPressed = event.keyCode || event.which;
console.log(e);
//if ENTER is pressed
if(keyPressed==13)
{
// Do stuff here :
}
else
{
return false;
}
}
</script>
<script contenteditable="">
function createTextArea() {
p_tghCount = p_tghCount +1;
p_tgh = "p_tgh" + p_tghCount;
pp_tgh = document.createElement("p");
pp_tgh.innerHTML = TextParagraph;
pp_tgh.setAttribute("contenteditable", "true");
pp_tgh.setAttribute("id",p_tgh);
pp_tgh.setAttribute("style","fontsize: 8px; color: #34495E;");
var content = document.getElementById("Row2Cell1");
content.appendChild(pp_tgh);
}
</script>
<script contenteditable="">
function createArticleHeading() {
p_ahCount = p_ahCount +1;
p_ah = "p_ah" + p_ahCount;
pp_ah = document.createElement("p");
pp_ah.innerHTML = ArticleHeading;
pp_ah.setAttribute("contenteditable", "true");
pp_ah.setAttribute("id",p_ah);
pp_ah.setAttribute("style","fontsize: 16px; color: DarkGreen;");
var content = document.getElementById("Row2Cell1");
content.appendChild(pp_ah);
}
</script>
<script>
function saveAs(filename, allHtml) {
allHtml = document.documentElement.outerHTML;
var blob = new Blob([allHtml], {type: 'text/csv'});
if(window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveBlob(blob, filename);
}
else{
var elem = window.document.createElement('a');
elem.href = window.URL.createObjectURL(blob);
elem.download = filename;
document.body.appendChild(elem);
elem.click();
document.body.removeChild(elem);
}
}
</script>
<script contenteditable="">
function createNewButton() {
var p_bn = document.createElement("li");
p_bn.innerHTML = ButtonParagraph;
p_bn.setAttribute('contenteditable', 'true');
p_bn.setAttribute("id","li-Default");
var content = document.getElementById("nav-01");
content.appendChild(p_bn);
}
</script>
</body>
</html>
Thanks