After pressing the virtual button, the selection disappears. To achieve this behavior, you must attach an event listener to the mousedown event in the following manner:
function addAnimation() {
selectedElement = window.getSelection().focusNode.parentNode;
$(selectedElement).addClass('grad');
}
$('.animate-selected').on('mousedown', addAnimation);
.text-field {
background: #333;
color: #fff;
width: 300px;
height: 100px;
}
.grad {
-webkit-animation: changeColor 8s ease-in infinite;
animation: changeColor 8s ease-in infinite;
}
.animate-selected{
margin: 2px 0;
border: 1px solid blue;
display: inline-block;
padding: 0 4px;
cursor: pointer;
}
@-webkit-keyframes changeColor {
0% {
color: #ff7473;
}
25% {
color: #ffc952;
}
50% {
color: #fc913a
}
75% {
color: #75D701;
}
100% {
color: #ff7473
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-field" contenteditable="true">
Hello world. Select this text and press the button
</div>
<div class="animate-selected">
Animate
</div>
You can also find it on JSFiddle.
If you only want to animate the selected text, follow these steps:
function addAnimation() {
$('.grad').contents().unwrap(); /* this removes previous animation */
var selectedText = window.getSelection();
var container = $(selectedText.anchorNode.parentNode);
var wrappedText = '<span class="grad">' + selectedText + '</span>'
container.html(container.html().replace(selectedText, wrappedText));
}
$('.animate-selected').on('mousedown', function(e) {
addAnimation();
});
.text-field {
background: #333;
color: #fff;
width: 300px;
height: 100px;
}
.grad {
-webkit-animation: changeColor 8s ease-in infinite;
animation: changeColor 8s ease-in infinite;
}
.animate-selected{
margin: 2px 0;
border: 1px solid blue;
display: inline-block;
padding: 0 4px;
cursor: pointer;
}
@-webkit-keyframes changeColor {
0% {
color: #ff7473;
}
25% {
color: #ffc952;
}
50% {
color: #fc913a
}
75% {
color: #75D701;
}
100% {
color: #ff7473
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-field" contenteditable="true">
Hello world. Select this text and press the button
</div>
<div class="animate-selected">
Animate
</div>
You can also view it on JSFiddle.