1. #1
    Ext JS Premium Member
    Join Date
    Oct 2009
    Posts
    5
    Vote Rating
    0
    bballiet is on a distinguished road

      0  

    Default Cursor Position in TextField

    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!

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,582
    Vote Rating
    1136
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default

    I'm not sure how to really do it with ExtJS functions or if you can. I do have it working with this:

    Code:
    	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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member
    Join Date
    Oct 2009
    Posts
    5
    Vote Rating
    0
    bballiet is on a distinguished road

      0  

    Default

    That works great, Mitchell - Thanks much!

  4. #4
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,582
    Vote Rating
    1136
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default

    Quote Originally Posted by bballiet View Post
    That works great, Mitchell - Thanks much!
    Not a problem!
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha - Support Team keckeroo's Avatar
    Join Date
    Mar 2008
    Location
    Winnipeg, Canada
    Posts
    342
    Vote Rating
    11
    keckeroo will become famous soon enough

      0  

    Default

    Just in case anyone wishes to have get/set cursor positioning in all form fields ... ;-)

    Code:
    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;
        }
       
    });

  6. #6
    Sencha User
    Join Date
    Mar 2012
    Posts
    3
    Vote Rating
    0
    ganesh.gk31 is on a distinguished road

      0  

    Default

    Is works for Extjs 4 as well.

  7. #7
    Sencha User
    Join Date
    Apr 2011
    Posts
    19
    Vote Rating
    0
    cadror is an unknown quantity at this point

      0  

    Default

    Here is keckeroo's code snippet updated for Ext JS 4.1.0:

    Code:
    // 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';
            }
        }
    });

  8. #8
    Sencha User
    Join Date
    Dec 2009
    Posts
    406
    Vote Rating
    3
    raj_plays is on a distinguished road

      0  

    Default

    Thank you, Keckeroo.
    Worked like a charm.

  9. #9
    Sencha User
    Join Date
    Sep 2014
    Posts
    23
    Vote Rating
    -5
    MrFox can only hope to improve

      0  

    Default

    For the getCaretPosition does not work. Both element.selectionStart or document.selection are properties unidentified.

  10. #10
    Sencha User
    Join Date
    Jul 2015
    Posts
    4
    Vote Rating
    0
    koko23 is on a distinguished road

      0  

    Default

    When is the selectionStart not going to be of type number?