Ich versuche, eine einfache "klicken, um Text in Zwischenablage kopieren" -Funktion zu erstellen, und ich habe eine harte Zeit zu versuchen, mein Javascript zu schreiben, so dass die verschiedenen Ereignisse nicht schneiden. Jedes Mal, wenn ein Benutzer auf textarea schwebt, möchte ich, dass das Textfeld die Hintergrundfarbe ändert und "Klicken zum Kopieren" sagt, und wenn Sie tatsächlich klicken, ändert der Textbereich die Farbe in etwas anderes und sagt "kopiert".Wie kann ich nicht auf Mouseenter- und Mouseave-Ereignisse warten, während ein Zeitlimit ausgeführt wird?
Jedes Mal, wenn ein Benutzer auf der Textfläche schwebt, sollte es idealerweise das Gleiche tun. Aber jetzt, wenn ich auf Kopieren klicke, und dann den Textbereich verlassen und zurückkommen, überlappt sich der Text. Wie kann ich sicherstellen, dass die Set-Timeout-Funktion vollständig ausgeführt wird, und erst dann wieder die Ereignisse mouseenter und mouseleave abgehört?
, außerdem ist hier der 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>
Ich bin nicht in der Lage, Ihr Problem zu verstehen. Die Geige funktioniert gut ohne Überschneidungen. Fehle ich etwas? – Aslam
Klicken Sie dann erneut auf das Textfeld @hunzaboy – Albzi
Sie haben zwei Divs, die an der gleichen Stelle angezeigt werden, aber unabhängig voneinander angezeigt/ausgeblendet. Ich empfehle, den zweiten Text einfach zu verstecken, wenn Sie den ersten zeigen: https://jsfiddle.net/yLug0fhk/2/ Alternativ können Sie überprüfen, ob der zweite Text gerade angezeigt wird, wenn Sie den ersten zeigen (was ich glaube als Antwort bereits zur Verfügung gestellt). –