PDA

View Full Version : Cursor Position in TextField



bballiet
27 Mar 2010, 3:41 PM
I need to get and set the cursor position within a textfield in Ext 3.0, and from my reading and testing it doesn't seem like there has been a good solution. Some of those posts are a bit old, however, so I thought I'd ask the community again. Is there a decent way to implement Ext.form.TextField cursor positioning in Ext 3.0? If not, can it be done in 3.1 or RC 3.2?

Thanks!

mitchellsimoens
27 Mar 2010, 6:17 PM
I'm not sure how to really do it with ExtJS functions or if you can. I do have it working with this:


var setCaretTo = function(id, pos) {
var obj = document.getElementById(id);
if(obj.createTextRange) {
var range = obj.createTextRange();
range.move("character", pos);
range.select();
} else if(obj.selectionStart) {
obj.focus();
obj.setSelectionRange(pos, pos);
}
};

var getCaretPos = function(id) {
var el = document.getElementById(id);
var rng, ii=-1;
if(typeof el.selectionStart=="number") {
ii=el.selectionStart;
} else if (document.selection && el.createTextRange){
rng=document.selection.createRange();
rng.collapse(true);
rng.moveStart("character", -el.value.length);
ii=rng.text.length;
}
return ii;
};

id variable is the id of the component though.

bballiet
29 Mar 2010, 5:25 AM
That works great, Mitchell - Thanks much!

mitchellsimoens
29 Mar 2010, 6:33 AM
That works great, Mitchell - Thanks much!

Not a problem! =D>

keckeroo
3 Jun 2011, 6:57 AM
Just in case anyone wishes to have get/set cursor positioning in all form fields ... ;-)



Ext.override(Ext.form.Field, {

setCursorPosition: function(pos) {
var el = this.getEl().dom;
if (el.createTextRange) {
var range = el.createTextRange();
range.move("character", pos);
range.select();
} else if(typeof el.selectionStart == "number" ) {
el.focus();
el.setSelectionRange(pos, pos);
} else {
alert('Method not supported');
}
},

getCursorPosition: function() {
var el = this.getEl().dom;
var rng, ii=-1;
if (typeof el.selectionStart=="number") {
ii=el.selectionStart;
} else if (document.selection && el.createTextRange){
rng=document.selection.createRange();
rng.collapse(true);
rng.moveStart("character", -el.value.length);
ii=rng.text.length;
}
return ii;
}

});

ganesh.gk31
22 Jun 2012, 5:22 AM
Is works for Extjs 4 as well.

cadror
13 Jul 2012, 1:35 PM
Here is keckeroo's code snippet updated for Ext JS 4.1.0:


// helper functions for caret positioning in HTML text fields
// http://www.sencha.com/forum/showthread.php?95486#post609639
Ext.override(Ext.form.field.Text, {
setCaretPosition: function(pos) {
var el = this.inputEl.dom;
if (typeof(el.selectionStart) === "number") {
el.focus();
el.setSelectionRange(pos, pos);
} else if (el.createTextRange) {
var range = el.createTextRange();
range.move("character", pos);
range.select();
} else {
throw 'setCaretPosition() not supported';
}
},

getCaretPosition: function() {
var el = this.inputEl.dom;
if (typeof(el.selectionStart) === "number") {
return el.selectionStart;
} else if (document.selection && el.createTextRange){
var range = document.selection.createRange();
range.collapse(true);
range.moveStart("character", -el.value.length);
return range.text.length;
} else {
throw 'getCaretPosition() not supported';
}
}
});

raj_plays
29 Jul 2013, 11:03 PM
Thank you, Keckeroo.
Worked like a charm.

MrFox
24 Oct 2014, 6:39 AM
For the getCaretPosition does not work. Both element.selectionStart or document.selection are properties unidentified.

koko23
28 Jul 2015, 7:22 AM
When is the selectionStart not going to be of type number?

vpappula
6 Aug 2015, 12:21 AM
Yes KOKO.

Rohan Jalil
15 Jun 2017, 3:39 AM
Hi,
I'm using extjs 6.0.2, And this is not working ,
Will you please advice me.
I'm trying to use this with html editor

mitchellsimoens
15 Jun 2017, 3:46 AM
Hi,
I'm using extjs 6.0.2, And this is not working ,
Will you please advice me.
I'm trying to use this with html editor

This thread is for Ext JS 3 which is very old and quite different than Ext JS 6. I would suggest you open a new thread in the Ext JS 6 forum.

Rohan Jalil
15 Jun 2017, 4:34 AM
This thread is for Ext JS 3 which is very old and quite different than Ext JS 6. I would suggest you open a new thread in the Ext JS 6 forum.

https://www.sencha.com/forum/showthread.php?347822-HtmlEditor-cursor-position-change-listner


Will you please check this one.?
Thanks for you responce

valgussev
19 Oct 2017, 8:17 AM
Hi,
I'm using extjs 6.0.2, And this is not working ,
Will you please advice me.
I'm trying to use this with html editor
You need to go deeper until the underlying input element, for me the following works:


var el = this.getEl().dom.querySelector('textarea');
el.focus();
el.setSelectionRange(pos, pos);