Question

I am trying to make a specific letter: "*" be red in a line of JavaScript coding that I am working with.
The following is my original:

function init(){
    var inp = document.getElementsByTagName('input');
    for(var i = 0; i < inp.length; i++) {
        if(inp[i].type == 'text','tel','number', 'email') {
            inp[i].setAttribute('rel',inp[i].defaultValue)
            inp[i].setAttribute('style', 'color: grey;')
            inp[i].onfocus = function() {
                if(this.value == this.getAttribute('rel')) {
                    this.value = '';
                    this.setAttribute('style', 'color: black;')
                } else {
                    return false;
                }
            }

In order to make a specific letter red, would I change it to?

function init(){
    var inp = document.getElementsByTagName('input');
    for(var i = 0; i < inp.length; i++) {
        if(inp[i].type == 'text','tel','number', 'email') {
            inp[i].setAttribute('rel',inp[i].defaultValue)
            inp[i].setAttribute('style', 'color: grey;')
            inp[i].onfocus = function() {
                if(this.value == this.getAttribute('rel')) {
                    this.value = '';
                    this.setAttribute('style', 'color: black;')

                if(this.value == this.getAttribute('*')) {
                    this.setAttribute('style', 'color: red;')

                } else {
                    return false;
                }
            }

How would I achieve this?

Answer 1

… because I am really bored, I ended up doing what you wanted using javascript.

It uses Mootools, but it should provide enough inspiration for you to recreate it using jQuery if you so desire.

function reposition() {
    var position = inputEl.getPosition();
    var occludeLabel = inputEl.value;
    occludeLabel = occludeLabel.replace(/\*/g, '<span class="red">*</span>', 'g');
    occludeEl.setStyles({
        top: position.y + 1,
        left: position.x + 1
    });
    occludeEl.set('html', occludeLabel);
}

Basically, every time you blur the input, a div containing the input box’s value is placed over the input box, occluding the text. I ran a simple .replace() to replace all asterisks with a span that would turn its contents red.

Please see this jsfiddle for all of the code: http://jsfiddle.net/eTEvQ/2/