CODEWITHSUNDEEP
jquery
user2572561
user2572561

Reputation: 117

keydown function calling multiple times

I have code

"$(document).on("keyup keydown", function(e){
             if(e.ctrlKey && e.keyCode == 80){
              event.preventDefault();
              console.log('keydown');
              printDiv();
              return false;
            //counterr = 1;
            }
            });"

which i am calling :

 function printDiv()
    {
       //things you want to happen.here creating and printing new html of current page.

            var width  = (screen.width*0.75);
        var height = (screen.height*0.75);
        var left   = (screen.width  - width)/2;
        var top    = (screen.height - height)/2;
        var params = 'width='+width+', height='+height;
        params += ', top='+top+', left='+left;
        params += ', directories=no';
        params += ', location=no';
        params += ', menubar=no';
        params += ', resizable=no';
        params += ', scrollbars=yes';
        params += ', status=no';
        params += ', toolbar=no';
        params += ', fullscreen=no';

    if((navigator.appName)=="Microsoft Internet Explorer")
         {
              var mywindow = window.open('');               
         }
         else
         {
            var mywindow = window.open('',"Print Results",params);      
         }
         var wholeDocument = document.getElementById("myclient").innerHTML;
    //     console.log(wholeDocument);
    mywindow.document.write("<link type=\"text/css\" href=\"src/styles.scss\" rel=\"stylesheet\"><div id=\"ownclient\">"+ wholeDocument +"</div>"); //path of your css and append the html you want to print.
    console.log('printing');
    mywindow.innerWidth=width; //set the width and height variables.
        mywindow.innerHeight=height;
        mywindow.focus();
        mywindow.print();
    }


    $(document).ready(function () {
        $('#bpc-common-table').on('mouseenter', function () {
            $('.ui-cell-data').on('mouseenter', function () {
               setTimeout(function(){
                $('.ui-tooltip').addClass('ui-tooltipDynamic');
               },1000)
            });
            $('.ui-cell-data').on('mouseleave', function () {
            });
        });
        $('.control-label.ddgenquestion03').eq(2).css('margin- 
       top','10px');


    });

The above function take html form the given id and create a new window for print.

On Pressing Ctrl+P the printDiv function is calling multiple times.? Do not know what to write i tried for counter but did not work. Any Idea please?

Upvotes: 0

Views: 823

Answers (1)

Oliver Trampleasure
Oliver Trampleasure

Reputation: 3293

You are sending a command to print whenever the browser recognises a keydown event, this occurs repeatedly when you are holding the keys down. The longer you hold the key, the more print commands you will have.

You need to check if you are in the middle of your print function, I have created an example below where I have created a midPrint boolean variable which is set to true just before sending a print command. If you are, then the script will not trigger the print function again.

This is only reversed to false on the release (i.e. keyup event) of the P key.

Demo

// Boolean storing whether you have sent a print command
midPrint = false;


// An example printDiv function - replace with your own
function printDiv() {
 console.log("Print"); 
}


// Removed 'keyup' so event only fires on 'keydown'
$(document).on("keydown", function(e){

    // Add a check to see if we are already in the middle of printing
    // !midPrint checks if the value of midPrint is NOT true
    if(e.ctrlKey && e.keyCode == 80 && !midPrint){
      midPrint = true;
      e.preventDefault();
      printDiv();
    }
    
});


// Add 'keyup' event for the key 'p'
$(document).on("keyup", function(e){

    // Reset the midPrint variable to false, so user can send a new print command with a new press of the key 'p'
    if(e.keyCode == 80 && midPrint){
      midPrint = false;
    }
    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 2

Related Questions