CODEWITHSUNDEEP
extjsextjs4extjs4.1
s.webbandit
s.webbandit

Reputation: 17000

How to disable text selection on TAB-key focus

ExtJS 4.1

I have 2 textfields like:

                {
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype: 'email',
                }, {
                    fieldLabel: 'Phone',
                    name: 'phone',
                    minLength: 8,
                    maxLength: 20,
                    value: '+7',
                },

As you can see phone field has predefined value.

When I finish filling email fileld, I press TAB key to focus next field (in my case - phone field).

When phone field is being focused by TAB key cursor incfield stands in the end of value (+7|) but all the text in the field becomes selected so if I type something all the text is replaced by new text.

I want cursor to stand in the end of the value string and value text would NOT TO BE SELECED.

Upvotes: 0

Views: 2345

Answers (4)

Lars Gyrup Brink Nielsen
Lars Gyrup Brink Nielsen

Reputation: 4095

The key to beating this problem is using setTimeout or something similar to @Reimius' answer.

Chrome and IE selects all text on focus, even if you call event.stopPropagation().

Possible solution (some jQuery used):

var selectText;

selectText = function(element, startIndex, endIndex) {
  var range;

  // Modern browsers, IE9+
  if (element.setSelectionRange != null) {
    element.selectionStart = startIndex;
    element.selectionEnd = endIndex;
    return;
  }

  // OldIE
  range = element.createTextRange();
  range.collapse(true);
  range.moveEnd('character', endIndex);
  range.moveStart('character', startIndex);
  range.select();
};

$(document).on('focus', 'input textarea', function(event) {
  setTimeout(function() {
    selectText(input, selectionStartIndex, selectionEndIndex);
  }, 0);
});

Upvotes: 0

s.webbandit
s.webbandit

Reputation: 17000

It looks like some Chrome behaviour. It's automatically selects all the text in the next text input on TABing.

Tried all the solutions posted and no effect in Chrome (Opera and Mozilla works fine).

Thanks all for taking time!

Upvotes: 0

Reimius
Reimius

Reputation: 5712

Here's a workaround that works:

{
    fieldLabel: 'Phone',
    name: 'phone',
    minLength: 8,
    maxLength: 20,
    value: '+7',
    listeners: {
        focus: function(field){
            var value = field.getValue();
            Ext.Function.defer(field.setRawValue, 1, field, [value]);
        }
    }
}

Causes a page reflow that sets the caret at the end of the field due to the value being set, should work for ya and doesn't cause a change event.

Upvotes: 2

Srinivas B
Srinivas B

Reputation: 1852

you can use like this.

            {
                fieldLabel: 'Phone',
                name: 'phone',
                minLength: 8,
                maxLength: 20,
                value: '+7',
                listeners:{
                     focus:function(t,e){
                       t.selectText(t.getValue().length,t.getValue().length);
                     }
                }
            }

Upvotes: 0

Related Questions