Question

我想在textarea输入中突出显示一个神奇的单词。我发现代码几乎可以实现我想要的链接和下面的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]
        });
    }
  });
});

我不想清除textarea，我希望它通过更改特定单词的字体颜色和增加字体大小来突出显示textarea中的魔术单词。（只有魔术词，没别的）

我尝试使用JSFIDDLE进行实验，但是stil无法让它工作。

http://jsfiddle.net/api/post/mootools/1.4/dependencies/more/

Answer 1

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

话虽这么说，你可以用div替换textarea，你可以在用户输入时附加文本。当您检测到关键字时，在div中的文本周围包装标记是一项简单的任务。如果你这样做，你可能想给div一个tabindex属性，因为这将允许它有焦点。然后，您可以在插入文本之前检查div是否已被选中。

如果你真的想使用textarea进行输入，那么你也可以尝试在textarea上浮动div或span元素，然后让你烧掉函数设置浮动div的文本，并使用CSS将它放在用户输入的单词。您可以使用以下内容确定光标在textarea中的位置：

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

Textarea突出魔术词。改变字体大小和颜色。

1 个答案: