window.addEventListener("keyup", onPress_ENTER, false) ??

vmars316 · February 12, 2019

Hello & Thanks.

Not working as I expected :

Intercepts enter-key pressed , but doesn't prevent :

            event.preventDefault();
            stopImmediatePropagation();

Here is mini code :

         window.addEventListener("keyup", onPress_ENTER, false);

         }
      </script>
      <script>
      function onPress_ENTER(){
        var keyPressed = event.keyCode || event.which;

        //if ENTER is pressed
        if(keyPressed==13)
        {
//            alert('enter pressed');
            event.preventDefault();
            stopImmediatePropagation();
        }
        else
        {
            return false;
        }
}

Here is the whole code:

<!DOCTYPE  html>  
<html>
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>MyStory.html</title>
      <!--   
         file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/MyStory.html
         https://www.dummies.com/web-design-development/css3/using-the-div-tag-to-create-tables/
         https://www.freeformatter.com/html-validator.html 
         <a href="https://developer.mozilla.org/en-US/" target="_blank">
         <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"alt="MDN logo" />
         </a>
         still to do: intercept 'enter-key' replace with 8 spaces ELSE just cancel it .
         -->  
      <style type="text/css">
         body {
         font-family:Sans-serif;
         margin: 0 auto;
         padding:0;
         border: 0;
         height: 100%;
         }
         html {
         height: 100%; 
         margin: 0 auto;
         padding:0;
         border: 0;
         }
         #wholePageWrapper {
         height: 100%; 
         margin: 0 auto;
         padding:0;
         }
         .Table
         {
         text-align: center;    
         vertical-align: top;
         margin: 0 auto;
         padding:0;
         }
         #mainHeading
         {
         text-align: center;
         width: 100%;
         background: #BCCE98;
         vertical-align: top;
         margin: 0 auto;
         padding:0;
         }
         #container {
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         overflow: hidden;
         margin: 0 auto;
         padding:0;
         }
         #Row1
         {
         display: block;
         width: 100%;
         vertical-align: top;
         margin: 0 auto;
         padding:0;
         }
         #Row2
         {
         display: block;    
         width: 100%;
         margin: 0 auto;
         padding:0;
         }
         #Row3
         {
         width: 100%;    
         margin: 0 auto;
         padding:0;
         vertical-align: top;  
         display: inline;   
         }
         #Row1Cell1
         {
         color: #4C4C4C; 
         display: inline-block;   
         text-align: center;
         width: 100%;
         font-size: 18px
         }
         #Row2Cell1
         {
         display: inline-block;   
         background-color: #DAE9BC;
         width: 20%;
         margin: 0 auto;        
         float: left;
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         }
         #Row2Cell2
         {
         display: inline-block;   
         text-align: center;
         width: 60%;
         background-color:#F8F8FF;
         margin: 0 auto;         
         float:left; 
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         }
         #Row2Cell3
         {
         display: inline-block;   
         width: 20%;
         background: #e9f2d7; 
         margin: 0 auto;         
         float: right;
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         }
         #Row3Cell1
         {
         display: inline-block;   
         width: 100%;
         background: #BCCE98;
         margin: 0 auto;    
         overflow: auto;      
         text-align: center;         
         }
         div{ 
         text-align: left;
         font-size: 14px
         }
         #p_bn {
         text-align: left;
         }
         #p_ah {
         color: #4C4C4C; /* color: #555555;  */
         text-align: left;
         font-size: 16px
         }
         #p_tgh {
         /*      color: #999999;  */
         color: #4C4C4C; 
         text-align: left;
         font-size: 14px
         }
         #currentPage_Address {
         color:#e9f2d7;
         }
      </style>
   </head>
   <body onload="documentURL()">
      <!-- Run me 1st -->
      <div class="Table">
         <!-- ============NewRow============== -->
         <div id="Row1">
            <div id="Row1Cell1">
               <p contenteditable="true" id="mainHeading"> myMainHeading</p>
            </div>
            <!-- <div class="Cell"  -->
         </div>
         <!-- <div class="Row"  -->
         <!-- ============NewRow============== -->
         <div id="container">
            <div id="Row2">
               <div id="Row2Cell1">
                  <p contenteditable="" style="color:#5886BC;">notes</p>
               </div>
               <!-- <div class="Cell"  -->
               <div id="Row2Cell2">
                  <p contenteditable="" id="p_ah">Article Heading</p>
                  <p contenteditable="" id="p_tgh">Text Paragraph</p>
               </div>
               <!-- <div class="Cell"  -->
               <div id="Row2Cell3">
                  <p contenteditable="true" style="color:#576C15">notes</p>
               </div>
               <!-- <div class="Cell"  -->
            </div>
            <!-- <div class="Row"  -->
         </div>
         <!--  id="container"  -->
         <!-- ============NewRow============== -->
         <div id="Row3">
            <div id="Row3Cell1">
               <button onclick="createArticleHeading()">Add Article Heading</button>
               <button onclick="createTextArea()">Add Text Area</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" > </p>
            </div>
            <!-- id="Row3Cell1"  -->
         </div>
         <!-- <div class="Row"  -->
      </div>
      <!--  <div class="Table">  -->
      <script>
         var  ArticleHeading = "Article Heading";
         var  TextParagraph = "Text Area";
         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("keyup", onPress_ENTER, false);

         }
      </script>
      <script>
      function onPress_ENTER(){
        var keyPressed = event.keyCode || event.which;

        //if ENTER is pressed
        if(keyPressed==13)
        {
//            alert('enter pressed');
            event.preventDefault();
            stopImmediatePropagation();
        }
        else
        {
            return false;
        }
} 
      </script>
      <script contenteditable="">
         function createTextArea() {
                   var p_tgh = document.createElement("p");
                   p_tgh.innerHTML = TextParagraph;
                   p_tgh.setAttribute("contenteditable", "true");
                   p_tgh.setAttribute("id","p_tgh");
                   var content = document.getElementById("Row2Cell2");
                   content.appendChild(p_tgh);
                 }	
      </script>	
      <script contenteditable="">
         function createArticleHeading() {
           var p_ah = document.createElement('p');
           p_ah.innerHTML = ArticleHeading;
           p_ah.setAttribute('contenteditable', 'true');
           p_ah.setAttribute("id","p_ah");
           var content = document.getElementById('Row2Cell2');
           content.appendChild(p_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

Edited February 12, 2019 by vmars316
typo

Ingolme · February 12, 2019

Your function definition needs an argument named "event" in order to work.

vmars316 · February 12, 2019

Do your mean like this ?

         window.addEventListener("keyup", onPress_ENTER, false);

         }
      </script>
      <script>
      function onPress_ENTER(event){
        var keyPressed = event.keyCode || event.which;

        //if ENTER is pressed
        if(keyPressed==13)
        {
//            alert('enter pressed');
            event.preventDefault();
            stopImmediatePropagation();
        }
        else
        {
            return false;
        }
}

Thanks

vmars316 · February 12, 2019

Hmm...

When I changed the listener to

window.addEventListener("keydown", onPress_ENTER, false);

and your change

      function onPress_ENTER(event){

All works perfectly !

I am thinking that 'keyup' was too late to cancel .

Is that correct ?

Thanks

Funce · February 12, 2019

6 hours ago, vmars316 said:

I am thinking that 'keyup' was too late to cancel .

From what I've observed, keys insert their characters on `keydown`.
Preventing propagation on `keyup` wouldn't do anything as all the events already propagated on a different one.

Sign In

window.addEventListener("keyup", onPress_ENTER, false) ??

Recommended Posts

vmars316

Ingolme

vmars316

vmars316

Funce

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity