Question

按下按钮时，我尝试为选定的文字添加课程。现在，由于某种原因，我的代码在按下按钮时将类应用于按钮，但我希望它适用于所选文本本身。

这就是我所拥有的：

我需要按钮为div，这可能是问题所在，但我只想要突出显示的文本来获取类，而不是按钮。

...谢谢

＆＃13;

function addAnimation() {
  document.execCommand('formatblock', false, 'span');
  selectedElement = window.getSelection().focusNode.parentNode;
  selectedElement.className += "grad";
}

＆＃13;

.textField {
  background: #333;
  color: #fff;
  width: 300px;
  height: 300px;
}

.grad {
     -webkit-animation: changeColor 8s ease-in infinite;
   animation: changeColor 8s ease-in infinite;
}

@-webkit-keyframes changeColor {
  0% {color: #ff7473;}
  25% {color: #ffc952;}
  50% {color: #fc913a}
  75% {color: #75D701;}
  100% {color: #ff7473}
}

＆＃13;

<div class="textField" contenteditable="true">Hello world. Select this text and press the button</div>

<div onclick="addAnimation()">Animate
            </div>

＆＃13;

Answer 1

单击虚拟按钮时，选择消失。您需要以这种方式绑定到mousedown事件：

＆＃13;

function addAnimation() {
    selectedElement = window.getSelection().focusNode.parentNode;
    $(selectedElement).addClass('grad');
}
$('.animate-selected').on('mousedown', addAnimation);

＆＃13;

.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
    }
}

＆＃13;

<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>

＆＃13;

同样在JSFiddle。

如果您只想为所选文本设置动画，请执行以下操作：

＆＃13;

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();
});

＆＃13;

.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
    }
}

＆＃13;

<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>

＆＃13;

同样在JSFiddle。

将CSS类应用于内容可编辑div

1 个答案: