jQuery设置聚焦并使光标位置在文字最后

  • 作者:不详
  • 来源:56gee
  • 更新时间:2012-03-30 13:07:02
  • 点击:395
[0分]

相信不少的朋友在开发中也遇到类似的一个问题:在表单输入框设置了文字,然后想直接使用focu()来聚焦处理,但发现在不同的浏览器下可能效果有所不同(光标落在文字的最前面)。这样的效果肯定是不行的,于是查了一下网上的资料,总结了下面3种处理的方法。

方法一:
function setSelectionRange(input, selectionStart, selectionEnd) {  
  if (input.setSelectionRange) { 
   input.focus();  
   input.setSelectionRange(selectionStart, selectionEnd);  
  }  
  else if (input.createTextRange) {  
   var range = input.createTextRange();  
   range.collapse(true);  
   range.moveEnd(’character’, selectionEnd);  
   range.moveStart(’character’, selectionStart);  
   range.select();  
  }  
} 

function setCaretToPos (input, pos) {  
  setSelectionRange(input, pos, pos);  
} 
调用办法:setCaretToPos(document.getElementById("YOURINPUT"), 4);

方法二:
$.fn.selectRange = function(start, end) {  
return this.each(function() {  
if (this.setSelectionRange) {  
  this.focus();  
  this.setSelectionRange(start, end);  
} 
else if (this.createTextRange){  
  var range = this.createTextRange();  
  range.collapse(true); 
  range.moveEnd(’character’, end);  
  range.moveStart(’character’, start);  
  range.select();  
}  
});  
};  
调用办法:$(’#elem’).selectRange(3,5);

方法三:
$.fn.setCursorPosition = function(position){  
  if(this.lengh == 0) return this;  
  return $(this).setSelection(position, position);  
} 

$.fn.setSelection = function(selectionStart, selectionEnd) {  
  if(this.lengh == 0) return this;  
  input = this[0];  
  if (input.createTextRange) {  
   var range = input.createTextRange();  
   range.collapse(true);  
   range.moveEnd(’character’, selectionEnd);  
   range.moveStart(’character’, selectionStart);  
   range.select();  
  } 
  else if (input.setSelectionRange) {  
   input.focus();  
   input.setSelectionRange(selectionStart, selectionEnd);  
  }  
  return this;  
}  
$.fn.focusEnd = function(){  
  this.setCursorPosition(this.val().length);  
} 
调用办法:$(element).focusEnd();
收藏内容
评分

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途。若转载请注明来自56gee.com中的“来源”。

栏目精华