CODEWITHSUNDEEP
javascriptjqueryhtml
Mehdi
Mehdi

Reputation: 3763

fetching Attribute name on a javascript event

I'm using tinymce library and I want to provide code completion feature inside tinymce textarea for my users.

now suppose in our tinymce < textarea> we have an html tag which has style attribute with empty value on it like this :

<div style="">
      <!-- Other codes-->
</div>

I have made a javascript event handler that when user press CTRL+Space that function calls. now suppose the user put his/her cursor between the style="" double quotes and press CTRL+SPACE

how can I fetch the html attribute name "style" in my javascript code ?

Upvotes: 2

Views: 138

Answers (1)

Abhitalks
Abhitalks

Reputation: 28387

You can use word splitting and some regex to do that. This could give you a starting point:

  1. Get the cursor position.
  2. Get the text at that cursor position
  3. Match only alphabets out of that text (attributes would be alphabets).

Demo: http://jsfiddle.net/abhitalks/stepB/1/

However, this will work only if the value of the attribute value is empty (as per your question). If not, you may look for another way to match, but the concept remains same.

Code:

// handle an event
$("textarea").bind("click", function() {
    var $input = $(this),             // your textarea
        text = $input.val(),          // the entire text of the textarea
        sel = this.selectionStart,    // cursor position
        word = findWord(text, sel),   // get the specific word at cursor position
        tag = word.match(/[A-z]+/);   // match only alphabets from that word
    $("#result").text(tag);
});

// function to find the word at specific position
function findWord(text, position){
    var words = text.split(' '),      // split at spaces into array of words
        offset = 0,                   // track characters traversed
        i;                            // index counter

    for(i=0; i < words.length; i++){
        offset += words[i].length + 1; // keep character count
        if (offset > position) break;  // if next count exceeds position,
    }                                  // we found the word at current index
    return words[i]; 
}

Hope that helps.

Note: selectionStart works from IE9 onwards. It is not supported in IE < 9. If you are looking to support IE.Legacy, then please have a look at the link proposed by @Esko in the comments below.

Upvotes: 1

Related Questions