ExtJS 4.1
我有两个文本字段,如:
{
fieldLabel: 'Email',
name: 'email',
vtype: 'email',
}, {
fieldLabel: 'Phone',
name: 'phone',
minLength: 8,
maxLength: 20,
value: '+7',
},
正如您所看到的,phone
字段具有预定义值。
当我填写email
fileld时,我按下TAB键以关注下一个字段(在我的情况下 - phone
字段)。
当TAB关键时,phone
字段聚焦时,光标位于值的末尾(+7|
),但字段中的所有文字都会被选中,所以如果我输入所有文本被新文本替换的内容。
我希望光标位于值字符串的末尾,值文本将不被选择。
答案 0 :(得分:2)
以下是一种有效的解决方法:
{
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]);
}
}
}
由于设置了值,导致页面重排在字段末尾设置插入符号,应该适用于ya并且不会导致更改事件。
答案 1 :(得分:0)
你可以这样使用。
{
fieldLabel: 'Phone',
name: 'phone',
minLength: 8,
maxLength: 20,
value: '+7',
listeners:{
focus:function(t,e){
t.selectText(t.getValue().length,t.getValue().length);
}
}
}
答案 2 :(得分:0)
看起来像Chrome的一些行为。它会自动选择TABing上下一个文本输入中的所有文本。
尝试了所有发布的解决方案,但在Chrome中没有效果(Opera和Mozilla可以正常工作)。
感谢大家抽出时间!
答案 3 :(得分:0)
解决此问题的关键是使用setTimeout或类似于@Reimius'的答案。
即使您拨打event.stopPropagation()
,Chrome和IE也会选择焦点上的所有文字。
可能的解决方案(使用了一些jQuery):
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);
});