How can I not listen for mouseenter and mouseleave events while I have a set timeout set?
I am trying to create a simple "click to copy text to clipboard" way and I am having a hard time writing my javascript so that different events don't overlap. Every time the user hovers over the textarea, I want the textarea to change its background color and say click to copy, and when you actually click, the textarea changes color to something else and says copied.
Every time a user hovers over a text field, they should ideally do the same. However, right now when I click copy and then leave the textbox and return various text overlays. How can I make sure that the timeout function is fully set and only then listens for mouseenter and mouseleave events again?
Also, here's 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>
+3
source to share
2 answers
You can do it:
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>
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 to see if the textareaCopiedText2
class has hidden
, so it won't show up when it does.
+1
source to share
An example of @Albzi working, perhaps you want "copy text to clipboard" to appear when the mouse never leaves the text area after clicking?
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 a fiddle: https://jsfiddle.net/ttm8m8uu/
0
source to share