input、textarea、div(contenteditable=true)光标定位到最后
1、针对input、textarea
//定位input、textarea
function po_Last(obj) {
obj.focus();//解决ff不获取焦点无法定位问题
if (window.getSelection) {//ie11 10 9 ff safari
var max_Len=obj.value.length;//text字符数
obj.setSelectionRange(max_Len, max_Len);
}
else if (document.selection) {//ie10 9 8 7 6 5
var range = obj.createTextRange();//创建range
range.collapse(false);//光标移至最后
range.select();//避免产生空格
}
}
2、针对div(contenteditable="true")
//定位div(contenteditable = "true")
function po_Last_Div(obj) {
if (window.getSelection) {//ie11 10 9 ff safari
obj.focus(); //解决ff不获取焦点无法定位问题
var range = window.getSelection();//创建range
range.selectAllChildren(obj);//range 选择obj下所有子内容
range.collapseToEnd();//光标移至最后
}
else if (document.selection) {//ie10 9 8 7 6 5
var range = document.selection.createRange();//创建选择对象
//var range = document.body.createTextRange();
range.moveToElementText(obj);//range定位到obj
range.collapse(false);//光标移至最后
range.select();
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div contenteditable光标测试</title>
<style type="text/css">
.div{ width:600px; height:200px; border:1px solid #CCC}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('.aclick').click(function(){
$('.div').html("回复[潇sdfsdfssssssssssssssdfsdf潇]:");
$('.div').focus();
po_Last_Div($('.div').get(0));
})
});
function po_Last_Div(obj) {
if (window.getSelection) {//ie11 10 9 ff safari
obj.focus(); //解决ff不获取焦点无法定位问题
var range = window.getSelection();//创建range
range.selectAllChildren(obj);//range 选择obj下所有子内容
range.collapseToEnd();//光标移至最后
}
else if (document.selection) {//ie10 9 8 7 6 5
var range = document.selection.createRange();//创建选择对象
//var range = document.body.createTextRange();
range.moveToElementText(obj);//range定位到obj
range.collapse(false);//光标移至最后
range.select();
}
}
</script>
</head>
<body>
<input type="text">
<div class="aclick">回复潇潇</div>
<div class="div" contenteditable="true">
</div>
</body>
</html>
