How can I not listen for mouseenter and mouseleave events while I have a set timeout running?

Question

I'm trying to create a simple "click to copy text onto clipboard" feature, and I'm having a hard time trying to write my javascript so that the different events don't intersect. Each time a user hovers on textarea I would like the textarea to change background color, and say "click to copy", and when you actually click, the text area changes color to something else and says "copied".

Each time a user hovers on the textarea, it should ideally do the same thing. However, right now when I click copy, and then leave the textarea and come back the different text overlaps. How can I make sure the set timeout function runs fully, and only then again listens to the mouseenter and mouseleave events?

Additionally, here is the Code:

 var pixelCodeTextarea = $("#tracking_html"), textareaCopiedText = $('#pixel_textarea_copy'), textareaCopiedText2 = $('#pixel_textarea_copied'), textareaWrapper = $('#pixel_textarea_wrapper'); textareaWrapper.mouseenter(function() { textareaCopiedText.removeClass('hidden'); pixelCodeTextarea.css('background-color', '#f1f8fb'); }).mouseleave(function() { textareaCopiedText.addClass('hidden'); pixelCodeTextarea.css('background-color', 'transparent'); }); pixelCodeTextarea.on('click', function() { textareaCopiedText.addClass('hidden'); pixelCodeTextarea.css('background-color', '#bbcadc'); textareaCopiedText2.removeClass('hidden'); window.setTimeout(function() { pixelCodeTextarea.css('background-color', 'transparent'); textareaCopiedText2.addClass('hidden'); }, 1500); }); 

  .hidden { display: none; } .textarea_wrapper { position: relative; max-width: 500px; } .textarea_copy_code, .textarea_copy_codied { position: absolute; top: 60px; left: 180px; font-weight: 600; text-transform: uppercase; font-size: 10px; } #tracking_html { max-width: 500px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="pixel_textarea_wrapper" class="textarea_wrapper"> <div id="pixel_textarea_copy" class="textarea_copy_code hidden">Copy code to clipboard</div> <div id="pixel_textarea_copied" class="textarea_copy_codied hidden">Copied to clipboard</div> <textarea id="tracking_html">Hello this is code</textarea> </div> 

Answer 1

You can do this:

 var pixelCodeTextarea = $("#tracking_html"), textareaCopiedText = $('#pixel_textarea_copy'), textareaCopiedText2 = $('#pixel_textarea_copied'), textareaWrapper = $('#pixel_textarea_wrapper'); textareaWrapper.mouseenter(function() { if (textareaCopiedText2.hasClass('hidden')) { textareaCopiedText.removeClass('hidden'); pixelCodeTextarea.css('background-color', '#f1f8fb'); } }).mouseleave(function() { textareaCopiedText.addClass('hidden'); pixelCodeTextarea.css('background-color', 'transparent'); }); pixelCodeTextarea.on('click', function() { textareaCopiedText.addClass('hidden'); pixelCodeTextarea.css('background-color', '#bbcadc'); textareaCopiedText2.removeClass('hidden'); window.setTimeout(function() { pixelCodeTextarea.css('background-color', 'transparent'); textareaCopiedText2.addClass('hidden'); }, 1500); }); 

 .hidden { display: none; } .textarea_wrapper { position: relative; max-width: 500px; } .textarea_copy_code, .textarea_copy_codied { position: absolute; top: 60px; left: 180px; font-weight: 600; text-transform: uppercase; font-size: 10px; } #tracking_html { max-width: 500px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="pixel_textarea_wrapper" class="textarea_wrapper"> <div id="pixel_textarea_copy" class="textarea_copy_code hidden">Copy code to clipboard</div> <div id="pixel_textarea_copied" class="textarea_copy_codied hidden">Copied to clipboard</div> <textarea id="tracking_html">Hello this is code</textarea> </div> 

The code specifically:

textareaWrapper.mouseenter(function() {
  if (textareaCopiedText2.hasClass('hidden')) {
    textareaCopiedText.removeClass('hidden');
    pixelCodeTextarea.css('background-color', '#f1f8fb');
  }
}).mouseleave(function() {
  textareaCopiedText.addClass('hidden');
  pixelCodeTextarea.css('background-color', 'transparent');
});

It checks if textareaCopiedText2 has the class hidden on it so it won't show when it does.

Answer 2

The example of @Albzi works however perhaps you want the "copy text to clipboard" to reappear when the mouse never leaves the textarea after click?

Like this:

var pixelCodeTextarea = $("#tracking_html"),
textareaCopiedText = $('#pixel_textarea_copy'),
textareaCopiedText2 = $('#pixel_textarea_copied'),
textareaWrapper = $('#pixel_textarea_wrapper'),
onTextarea = false;

textareaWrapper.mouseenter(function() {
        onTextarea = true;
        if(textareaCopiedText2.hasClass('hidden')) {
      textareaCopiedText.removeClass('hidden');
      pixelCodeTextarea.css('background-color', '#f1f8fb');
    }
}).mouseleave(function() {
    onTextarea = false;
    if(textareaCopiedText2.hasClass('hidden')) {
    textareaCopiedText.addClass('hidden');
    pixelCodeTextarea.css('background-color', 'transparent');
  }
});

pixelCodeTextarea.on('click', function() {
  textareaCopiedText.addClass('hidden');
  pixelCodeTextarea.css('background-color', '#bbcadc');
  textareaCopiedText2.removeClass('hidden');

  window.setTimeout(function() { 
    pixelCodeTextarea.css('background-color', 'transparent'); 
    textareaCopiedText2.addClass('hidden');
    if (onTextarea) {
        textareaCopiedText.removeClass('hidden');
      pixelCodeTextarea.css('background-color', '#f1f8fb');
    }
  }, 1500);
});

Here is the fiddle: https://jsfiddle.net/ttm8m8uu/