search

timdream / jszhuyin

JS 注音：JavaScript 自動選字注音輸入法；"Smart" Chinese Zhuyin Input Method in JavaScript.
https://jszhuyin.timdream.org/
MIT License
223 stars 19 forks source link

Floating candidate panel on the demo page #29

Closed timdream closed 8 years ago

timdream commented 8 years ago

The coordinate of the caret can be found with window.getSelection().getRangeAt(0).getBoundingClientRect() (ignoring multiple selections), we could position the candidate panel just right below the caret with it. The style of the panel would need to be redesigned though.

timdream commented 8 years ago

Unfortunately the above line only works with contenteditable, not textarea. I wonder how GitHub did it.

The solution I could find so far are all pointing at re-construct the text flow in another div and measure it. That's really, really slow since it involve a lot of sync layout call...

timdream commented 8 years ago

Actually, even with contenteditable the API method is not reliable; an empty line or empty contenteditable has no client rect; even if we infer the position by inspecting existing <br> (and start with an <br> I am not entirely sure we could get it wright.

I am moving the code from web.js to index.html since it's not a general, 'librarize-able' solution.

timdream commented 8 years ago

Fixed in 306c7cd