Glimpsing the nightmare: compatibility issues

I was working on the CSE javascript with the aim of ensuring it works on IE7 (at the moment I have only bothered setting it up for Gecko), and all I have to say is YUK. At first I was surprised that all of encryption and decryption code worked and the general methods for manipulating the DOM were compatible.

The main problem was finding the caret position and the double click entry system. Finding the caret position in a textarea in IE is a real pain (compared to Gecko). There are a number of solutions on the web, one even from the "microsoft" developers. The most general approach seems to be to follow their solution. It basically inserts a reference mark into the text at the selection (read caret) position and then searches, counting chars until it finds it. Two caveats

  1. use a reference mark that cannot be part of normal text, their suggestion of ~ (tilde) is not good, especially in the unix world
  2. line breaks in windows will be counted as two chars (as far as the char count goes), but should be counted as a single char as far as finding and positioning the caret. The two chars are \r\n (carriage return and linefeed).

The second point is confusing, as when dealing with text in some text area (searching, modifying etc.) the fact that there are two characters is important , for example, in counting the number of characters a particular word is from the beginning of the text. So the "caret position" for a location and the "real position" in text for that same location may not be the same. A simple solution is to follow the microsoft approach, linked above, and search for the reference mark twice (once where all \r\n sequences have been replaced by a single char, say \n, and once in the unmodified text). The difference in these two can be used as a "caret offset" in positioning the caret with respect to the real text position.