您的位置：首页 > Web前端 > JavaScript

JavaScript 获取/设置光标位置,兼容Input&&TextArea

2012-02-23 00:00 691 查看 
<!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>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

body { margin: 32px; font-family: Verdana, sans-serif; font-size: 13px; }

.title { font-size: 18px; font-weight: bolder;margin:40px 0; }

.input { width: 50%; font-family: Verdana, sans-serif; font-size: 13px; text-indent: 2px; }

</style>

<script>

//获取光标位置

//单行文本框

function getPositionForInput(ctrl){

var CaretPos = 0;

if (document.selection) { // IE Support

ctrl.focus();

var Sel = document.selection.createRange();

Sel.moveStart('character', -ctrl.value.length);

CaretPos = Sel.text.length;

}else if(ctrl.selectionStart || ctrl.selectionStart == '0'){// Firefox support

CaretPos = ctrl.selectionStart;

}

return (CaretPos);

}

//多行文本框

function getPositionForTextArea(ctrl) {

var CaretPos = 0;

if(document.selection) {// IE Support

ctrl.focus();

var Sel = document.selection.createRange();

var Sel2 = Sel.duplicate();

Sel2.moveToElementText(ctrl);

var CaretPos = -1;

while(Sel2.inRange(Sel)){

Sel2.moveStart('character');

CaretPos++;

}

}else if(ctrl.selectionStart || ctrl.selectionStart == '0'){// Firefox support

CaretPos = ctrl.selectionStart;

}

return (CaretPos);

}

//设置光标位置函数

function setCursorPosition(ctrl, pos){

if(ctrl.setSelectionRange){

ctrl.focus();

ctrl.setSelectionRange(pos,pos);

}

else if (ctrl.createTextRange) {

var range = ctrl.createTextRange();

range.collapse(true);

range.moveEnd('character', pos);

range.moveStart('character', pos);

range.select();

}

}

//test

function process( id,targetId ){

var no = document.getElementById(id).value;

setCursorPosition(document.getElementById(targetId),no);

}

</script>

</head>

<body>

<div class="title">JavaScript 获取/设置光标位置,兼容Input&&TextArea：</div>

<div class="title">单行文本框</div>

<p><input class="input" id="textbox" name="textbox" value="Hi,CssRain!!!" /></p>

<input type="button" onclick="alert( getPositionForInput( document.getElementById('textbox') ) )" value="Get Position">

输入位置: <input type="text" id="no1" size="1" /><input type="button" onclick="process('no1','textbox');" value="Set Position">

</body>

<div class="title">多行文本框</div>

<textarea id="zhangdanNum" name="zhangdanNum" style="height:66px;width:246px;overflow:hidden">Hi,CssRain!!!</textarea>

<input type="button" onclick="alert( getPositionForTextArea( document.getElementById('zhangdanNum') ) )" value="Get Position">

输入位置: <input type="text" id="no2" size="1" /><input type="button" onclick="process('no2','zhangdanNum');" value="Set Position">

<div class="title">

<!--google广告开始-->

<div style="text-align:center;margin-top:140px;">

<script type="text/javascript"><!--

google_ad_client = "pub-0545040803774316";

/* 728x90, 创建于 08-6-5 */

google_ad_slot = "7034803449";

google_ad_width = 728;

google_ad_height = 90;

//-->

</script>

<script type="text/javascript"

src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script>

</div>

<!--google广告结束-->

<br/>

<a href="http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/comment-page-4/">参考</a>

  And <a href="http://www.cssrain.cn" >CssRain.cn</a>

</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航