Текстовое выделение волшебного слова.изменить размер шрифта и цвет.

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

Answer 1

Я не верю, что можно изменить цвет или каким-либо образом применить определенный стиль к тексту в текстовой области.

При этом вы можете заменить текстовую область на div, который вы можетедобавить текст, как пользователь печатает.Когда вы обнаруживаете ключевое слово, это простая задача - обернуть тег вокруг текста в div.Если вы сделаете это, вы можете захотеть дать свойству div свойство tabindex, так как это позволит ему иметь фокус.Затем вы можете проверить, выбран ли div, прежде чем вставлять в него текст.

Если вы действительно хотите использовать текстовую область для ввода, то вы также можете попробовать поместить элемент div или span поверх текстовой области, а затемВы записываете функцию, устанавливаете текст плавающего div, и используете CSS, чтобы расположить его над словом, набранным пользователем.Вы можете определить, где находится курсор в текстовой области, например:

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