# how can I tell which \<p\> element has the focus ?

**URL:** <https://forum.kirupa.com/t/how-can-i-tell-which-p-element-has-the-focus/639325>\
**Category:** Uncategorized\
**Created:** [January 25, 2019, 3:24pm UTC](https://forum.kirupa.com/t/how-can-i-tell-which-p-element-has-the-focus/639325 "2019-01-25T15:24:13Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\
**Post date:** [January 25, 2019, 3:24pm UTC](https://forum.kirupa.com/t/how-can-i-tell-which-p-element-has-the-focus/639325/1 "2019-01-25T15:24:13Z")

</div>

Hello & Thanks ;  
On a doubleClick ‘how can I tell which element has the focus’ .  
Thanks for your help !

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 25, 2019, 8:55pm UTC](https://forum.kirupa.com/t/how-can-i-tell-which-p-element-has-the-focus/639325/2 "2019-01-25T20:55:54Z")

</div>

Just check the `document.activeElement` property 🙂

---

<div class="post-metadata">

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\
**Post date:** [January 26, 2019, 12:54am UTC](https://forum.kirupa.com/t/how-can-i-tell-which-p-element-has-the-focus/639325/3 "2019-01-26T00:54:57Z")

</div>

Thanks ,  
Now finding that there is such a thing ,  
I googled and found an example:

```auto
<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

---

<div class="post-metadata">

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\
**Post date:** [February 13, 2019, 2:39am UTC](https://forum.kirupa.com/t/how-can-i-tell-which-p-element-has-the-focus/639325/4 "2019-02-13T02:39:35Z")

</div>

Thanks,  
Will this work in all Browsers ?  
Thanks

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [February 13, 2019, 3:09am UTC](https://forum.kirupa.com/t/how-can-i-tell-which-p-element-has-the-focus/639325/5 "2019-02-13T03:09:08Z")

</div>

[https://caniuse.com/#search=activeElement](https://caniuse.com/#search=activeElement)

---

<div class="post-metadata">

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\
**Post date:** [February 15, 2019, 3:19am UTC](https://forum.kirupa.com/t/how-can-i-tell-which-p-element-has-the-focus/639325/6 "2019-02-15T03:19:46Z")

</div>

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:

```auto
         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:

```auto
<!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
