Textarea高亮显示魔术字。 更改字体大小和颜色。

Question

i want a magic word highlighing in textarea input. I found code somewhere that almost does what I want see link and Javascript code below:

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

here is the javascript code

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

I don't want to clear the textarea, I want it to highlight the magic word within the textarea by changing the font colour of that particular word and increasing the font size. (only of the magic word, nothing else)

I tried to experiment with JSFIDDLE but stil couldnt get it to work.

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

Answer 1

I don't believe it is possible to change the color or in any way apply specific styling to text in a textarea.

That being said, you can replace the textarea with a div, which you can append text to as the user types. When you detect a keyword, it is a simple task of wrapping an tag around the text in the div. If you do this, you may want to give the div a tabindex property, as this will allow it to have focus. Then you can check whether the div is selected before inserting text into it.

If you really want to use a textarea for input, then you can also try floating a div or span element over the textarea, and then have you burn function set the text of floating div, and use CSS to position it over the word the user typed. You can determine where the cursor is in a textarea with something like:

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