Development

Note: this was converted from Chinese using Google translate, so the wording can be improved. If you prefer Chinese, see the revision history.

Preface

This document will introduce achieve At.js some details and points. The following contents are present in jquery.atwho.coffee inside for ease of description, the binding object to textarea, for example, (and input ). registered listeners character with @, for example, (of course it can be any character)

Mirror

Mirror class is used to clone a textarea, in order to obtain @ in the whole document position (offset) or coordinates.

Realize points are as follows :

Copy textarea all styles to a transparent div inside details see line 33 With a span element wrapped @, and give ID. Use $ .position () to get this @ in div locations. 50 lines Ask div filled textarea in content. 140 line Through the above steps, then @ coordinates plus textarea coordinates can be obtained at the entire document position.

Long sentences and blank sign processing

Whitespace

In fact, apart whitespace, and some HTML unrecognizable symbols such as a newline. for their handling see line 130

Long Sentences

Since HTML text will ignore input to textarea spaces (whitespace HTML is & nbsp; ). In order to ensure filling the div in the content layout with textarea as we can use. preplace of div, but we want to insert the span element gets @ position. Therefore, Here is unavailable, but a better way is not compatible with IE.

Only you need div join 'white-space': 'pre-wrap' style can and textarea be the same punctuation and spaces are not ignored manifestation with pre same.

Since white-space is css2 properties, so in older IE browsers cannot be used. For pre-wrap detailed explanation see: whitespace.

Another point, all the contents were used to span element wrapped up, like this hello </ span> @ </ span> Haoao </ span> so long sentences arise when more accurate get @ position.

There is another solution is to use each space is an HTML element package, non-IE browsers add pre-wrap style, IE 's then use pre-wrapped elements. Why do not all use pre-wrapped box it? After testing, pretreatment for long sentences seemingly less desirable in the non-IE browsers. (back then detailed summary)

Compatible with IE

On one there is when it comes to IE compatibility problems. But those in the Mirror are not used to. Because later found a very serious problem: textarea of font styles and HTML the font style if not the same time, the above solution for IE will invalid. Originally cloning when there will textarea of font styles cloned into div years, But in the IE browser series which did not even valid.