How to combine this document keypress and button click events

Question

I can find plenty of combining keypress and click events. Though I cannot find one that combines one that has a keypress on the document and a click event on a link.

How do I shorten this code? Keeping in mind I don't want to add a click event to the entire document and want to avoid repeating the code as I have.

My code makes it so if you press the 'S' key on the keyboard the fullscreen comes up or you can press the Search button. Both will do the same function.

$(document).ready(function() {
  $(document).keydown(function(searchstock) {
    if(searchstock.which == 83) {
      $('#header-bar').toggleClass('displaysearch');
      setTimeout(
        function()
        {
          $('#ccstocknum').select();
        }, 75);
    }
  });
  $("#searchbtn a").on("click", function(){
    $('#header-bar').toggleClass('displaysearch');
    setTimeout(
      function()
      {
        $('#ccstocknum').select();
      }, 75);
  });
});

#header-bar {
  display: none;
  float: left;
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  background: black;
  color: #fff;
  text-align: center;
}
#header-bar.displaysearch { display: block; }
#header-bar h1 {
  width: 100%;
  text-align: center;
}
p.strong { font-weight: bold !important; }
#searchbtn { float: left; width: 100%; }
#searchbtn a { padding: 10px; background: grey; color: #fff; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="strong">Press S on the keyboard to get the fullscreen image</p>
<p>Alternatively you can press the following link</p>
<div id="searchbtn">
  <a href="#">Search</a>
</div>
<div id="header-bar">
  <h1>Full Screen</h1>
  <input type="number" id="ccstocknum" />
</div>

My thoughts are if I can change:

if(searchstock.which == 83) {

To something like:

if(searchstock.which == 83) or $('#searchbtn a').on("click", function() {

Though obviously that doens't work ^_^

Thank you in advance :-)

Update Keypress was having issues with 'S' or single keys in Chrome. So I changed it to keydown. Works a treat :-)

Answer 1

put the code in a function and call it

$(document).ready(function() {
  $(document).keypress(function(searchstock) {
    if(searchstock.which == 83, 115) {
      searchstock();
    }
  });
  $("#searchbtn a").on("click", function(){
    searchstock();
  });
});
function searchstock(){
   $('#header-bar').toggleClass('displaysearch');
    setTimeout(
      function()
      {
        $('#ccstocknum').select();
      }, 75);
}

#header-bar {
  display: none;
  float: left;
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  background: black;
  color: #fff;
  text-align: center;
}
#header-bar.displaysearch { display: block; }
#header-bar h1 {
  width: 100%;
  text-align: center;
}
p.strong { font-weight: bold !important; }
#searchbtn { float: left; width: 100%; }
#searchbtn a { padding: 10px; background: grey; color: #fff; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="strong">Press S on the keyboard to get the fullscreen image</p>
<p>Alternatively you can press the following link</p>
<div id="searchbtn">
  <a href="#">Search</a>
</div>
<div id="header-bar">
  <h1>Full Screen</h1>
  <input type="number" id="ccstocknum" />
</div>

You can also use .on() this way

$(document).ready(function() {
  $( "body" ).on({
    click: function(e) {
    if((e.target.tagName === 'A') && (e.target.parentNode.id === 'searchbtn'))
      searchstock();
    },
    keypress: function(e) {
      if((e.which == 83) || (e.which ==115)) {
        searchstock();
      }
    }
  });
});
function searchstock(){
   $('#header-bar').toggleClass('displaysearch');
    setTimeout(
      function()
      {
        $('#ccstocknum').select();
      }, 75);
}

#header-bar {
  display: none;
  float: left;
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  background: black;
  color: #fff;
  text-align: center;
}
#header-bar.displaysearch { display: block; }
#header-bar h1 {
  width: 100%;
  text-align: center;
}
p.strong { font-weight: bold !important; }
#searchbtn { float: left; width: 100%; }
#searchbtn a { padding: 10px; background: grey; color: #fff; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="strong">Press S on the keyboard to get the fullscreen image</p>
<p>Alternatively you can press the following link</p>
<div id="searchbtn">
  <a href="#">Search</a>
</div>
<div id="header-bar">
  <h1>Full Screen</h1>
  <input type="number" id="ccstocknum" />
</div>