本文为归档内容,原始地址在 博客园.

QQ群里经常有人问怎么设置textarea中光标的位置,所见即所得中如果选中文本。如果你也不会,请往下看:


关键词:javascript 光标 位置 鼠标取词 createRange getSelection

getPosition


先上代码,你也可以测试下效果。



<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
<style type="text/css">
</style>
<script type="text/javascript">
//<![[
function getPosition() {
var startPos = endPos = 0;
var element = document.getElementById("box");
if( document.selection ) {
var range = document.selection.createRange();
var drange = range.duplicate();
drange.moveToElementText( element );
drange.setEndPoint( "EndToEnd", range );
startPos = drange.text.length - range.text.length;
endPos = startPos + range.text.length;
}else if( window.getSelection ) {
startPos = element.selectionStart;
endPos = element.selectionEnd;
}
return {
"start" : startPos,
"end" : endPos
}
}
window.onload = function(){
var element = document.getElementById("box");
element.onmouseup = function(){
var pos = getPosition(),
val = element.value.toString();
console.log(val.substring(pos.start, pos.end) || "没有选中");
}
}
//]]>
</script>
</head>
<body>
<textarea id="box">木子Vs立青,性别男,爱好女,单身。</textarea>
</body>
</html>





selection < getSelection


IE下的选择方式:判断方式(document.selection



//获取选取var range = document.selection.createRange();
var drange = range.duplicate();
drange.moveToElementText( element );
drange.setEndPoint( "EndToEnd", range );//获取position
startPos = drange.text.length - range.text.length;
endPos = startPos + range.text.length;


比较啰嗦,这代码也没啥意思,看了就忘,所以得多看多写,熟练了就好了。


下面是非IE的选择方式:判断方式(window.getSelection



startPos = element.selectionStart;
endPos = element.selectionEnd;


简练多了,是吧~




设置光标位置


这个就比较简单了,把 start 和 end 的值设置成一样就搞定了!


chrome下:



element.selectionStart = 5;
element.selectionEnd = 5;
element.focus();


IE下:



var range = document.selection.createRange();
range.collapse(true);
range.moveEnd('character', 5);
range.moveStart('character', 5);
element.focus();


给他们一个focus的目的就是为了聚焦到textarea上去,以便清晰看到光标已经成功设置了。


Demo我就不写了,相信应该有了大概的了解。




写个Class,方便使用

var getObj = function ( id ) {
//获取对象
var ele = document.getElementById(id);
//返回结果
return {
element: ele,
startPos: 0,
endPos: 0,
init: function(){
var _this = this;
if( !("__proto__" in {}) ){
this.element.attachEvent("onmouseup", _this.getPos);
}else{
this.element.addEventListener("mouseup", _this.getPos, false);
}
return this;
},
getPos: function () {
var _this = this;
if( document.selection ) {
try{
var range = document.selection.createRange();
var drange = range.duplicate();
drange.moveToElementText( _this.element );
drange.setEndPoint( "EndToEnd", range );
this.startPos = drange.text.length - range.text.length;
this.endPos = this.startPos + range.text.length;
}catch(e){
}
}else if( window.getSelection ){
try{
this.startPos = this.element.selectionStart;
this.endPos = this.element.selectionEnd;
}catch(e){
//throw new Error("getPos error");
}
}
return this;
},
setPos: function ( m, n ) {
var arg2 = n || m;
if( document.selection ) {
var range = document.selection.createRange();
range.collapse(true);
range.moveEnd('character', arg2);
range.moveStart('character', m);
this.element.focus();
}else if( window.getSelection ){
this.startPos = this.element.selectionStart = m;
this.endPos = this.element.selectionEnd = arg2;
this.element.focus();
}
},
getStr: function( m, n ){
this.getPos( m, n );
return this.element.value.toString().slice(this.startPos, this.endPos);
}
};
};

很受伤,下次接着弄。你也可以试试哈~


函数调用方式:


1. 初始化init()

var t = getObj("box").init();

2. setPos()

//选中从m到n之间的内容
t.setPos(m, n);
//一个参数就是设置光标位置
t.setPos(m);

3. getPos()

//这个算是一个内置函数,每次选择都自动调用了,可以不管
t.getPos();

4. getStr()

//获取选中的字符串
t.getStr();

5. invoke()

//执行你送入的函数
function yourFun(){}
//这个方法还没加进去,感觉用处也不大,原理就是使用call
t.invoke(yourFun);

主要是不很了解IE的API,纠结了半天,又不愿意去看别人写的文档,先晾在这里,下次不全~


本文未完,待续…