文本区域突出显示魔术词。更改字体大小和颜色。

Question

我想要一个在文本区域输入中突出显示的神奇单词。我在某处找到了几乎可以实现我想要的功能的代码，请参阅下面的链接和Javascript代码：

http://mootools .net/demos/?demo=Element.Event

这里是 javascript 代码

window.addEvent('domready', function() {
  var textarea = $('myTextarea'), log = $('log').setStyle('opacity', 0);

  // We define the highlight morph we're going to
  // use when firing an event
  var highlight = new Fx.Morph(log, {
    duration: 1500,
    link: 'cancel',
    transition: 'quad:out'
  });

  // Here we start adding events to textarea.
  // Note that 'focus' and 'keyup' are native events, while 'burn'
  // is a custom one we've made
  textarea.addEvents({
    focus: function() {
        // When focusing, if the textarea contains value "Type here", we
        // simply clear it.
        if (textarea.value.contains('Type here')) textarea.set('value', '');
    },

    keyup: function() {
        // When user keyups we check if there are any of the magic words.
        // If yes, we fire our custom event burn with a different text for each one.
        if     (textarea.value.contains('hello')) textarea.fireEvent('burn', 'hello world!');
        else if (textarea.value.contains('moo')) textarea.fireEvent('burn', 'mootools!');
        else if (textarea.value.contains('pizza')) textarea.fireEvent('burn', 'Italy!');
        else if (textarea.value.contains('burn')) textarea.fireEvent('burn', 'fireEvent');
        // note that in case of 'delayed', we are firing the event 1 second late.
        else if (textarea.value.contains('delayed')) textarea.fireEvent('burn', "I'm a bit late!", 1000);
    },

    burn: function(text) {
        // When the textarea contains one of the magic words
        // we reset textarea value and set the log with text
        textarea.set('value', '');
        log.set('html', text);

        // then we start the highlight morphing
        highlight.start({
            backgroundColor: ['#fff36f', '#fff'],
            opacity: [1, 0]
        });
    }
  });
});

我不想清除文本区域，我希望它通过更改特定单词的字体颜色来突出显示文本区域中的魔术词并增加字体 尺寸。 （只有魔法词，没有别的）

我尝试用 JSFIDDLE 进行实验，但仍然无法让它工作。

http://jsfiddle.net/api/post/mootools/1.4/dependencies/更多/

Answer 1

我不认为可以更改颜色或以任何方式将特定样式应用于文本区域中的文本。

话虽这么说，您可以用 div 替换文本区域，您可以在用户键入时将文本附加到该 div 上。当您检测到关键字时，只需将标签包裹在 div 中的文本周围即可。如果这样做，您可能需要为 div 提供 tabindex 属性，因为这将允许它获得焦点。然后您可以在插入文本之前检查该 div 是否被选中。

如果你确实想使用文本区域进行输入，那么你也可以尝试在文本区域上浮动一个div或span元素，然后让你的burn函数设置浮动div的文本，并使用CSS将其定位在用户的单词上键入。您可以通过以下方式确定光标在文本区域中的位置：

var textarea = document.getElementById('textarea'),
    lineNum = textarea.selectionStart % textarea.cols,
    colNum = textarea.selectionStart - (textarea.cols * lineNum);