Fixed cursor positioning

This commit is contained in:
Sergi Mansilla 2011-02-27 19:25:15 +01:00
commit 0ca1e2cf2d
3 changed files with 43 additions and 18 deletions

View file

@ -46,6 +46,13 @@ var TextInput = function(parentNode, host) {
var text = dom.createElement("textarea"); var text = dom.createElement("textarea");
text.style.left = "-10000px"; text.style.left = "-10000px";
// We have too many moving parts in the iPad, so we set the text
// positioning to absolute to be able to calculate the precise position for
// cursor. Otherwise the cursor position would be relative to the screen
// coordinates (position: fixed).
if (useragent.isIPad)
text.style.position = "absolute";
parentNode.appendChild(text); parentNode.appendChild(text);
var PLACEHOLDER = String.fromCharCode(0); var PLACEHOLDER = String.fromCharCode(0);

View file

@ -68,8 +68,10 @@ var Cursor = function(parentEl) {
this.showCursor = function() { this.showCursor = function() {
this.isVisible = true; this.isVisible = true;
if (!useragent.isIPad)
this.element.appendChild(this.cursor); this.element.appendChild(this.cursor);
var cursor = this.cursor; var cursor = this.cursor;
cursor.style.visibility = "visible"; cursor.style.visibility = "visible";
this.restartTimer(); this.restartTimer();
@ -120,7 +122,7 @@ var Cursor = function(parentEl) {
this.cursor.style.width = config.characterWidth + "px"; this.cursor.style.width = config.characterWidth + "px";
this.cursor.style.height = config.lineHeight + "px"; this.cursor.style.height = config.lineHeight + "px";
if (this.isVisible) { if (this.isVisible && !useragent.isIPad) {
this.element.appendChild(this.cursor); this.element.appendChild(this.cursor);
} }

View file

@ -319,23 +319,39 @@ var VirtualRenderer = function(container, theme) {
}; };
this.getTextAreaContainer = function() { this.getTextAreaContainer = function() {
return this.container; // Let's make it play nice wit iPad. Otherwise the default padding of
// the container will make the cursor shift to the left.
return useragent.isIPad ? this.content : this.container;
}; };
this.moveTextAreaToCursor = function(textarea) { this.moveTextAreaToCursor = function(textarea) {
// in IE the native cursor always shines through if (!this.layerConfig)
if (useragent.isIE)
return; return;
var pos = this.$cursorLayer.getPixelPosition(); var pos, left, top;
if (useragent.isIPad) {
pos = this.$cursorLayer.getPixelPosition(true);
if (!pos)
return;
left = pos.left + this.$padding - 3;
top = pos.top;
} else {
pos = this.$cursorLayer.getPixelPosition();
if (!pos) if (!pos)
return; return;
var bounds = this.content.getBoundingClientRect(); var bounds = this.content.getBoundingClientRect();
var offset = (this.layerConfig && this.layerConfig.offset) || 0; var offset = this.layerConfig.offset;
textarea.style.left = (bounds.left + pos.left + this.$padding) + "px"; left = bounds.left + pos.left + this.$padding;
textarea.style.top = (bounds.top + pos.top - this.scrollTop + offset) + "px"; top = bounds.top + pos.top - this.scrollTop + offset;
}
textarea.style.left = left + "px";
textarea.style.top = top + "px";
textarea.style.lineHeight = this.layerConfig.lineHeight + "px";
}; };
this.getFirstVisibleRow = function() { this.getFirstVisibleRow = function() {