textarea 获取光标位置和设置光标位置

获取光标位置

//ctrl 是dom节点function getCursortPosition (ctrl) {//获取光标位置函数 var CaretPos = 0; // IE Supportif (document.selection) {ctrl.focus (); // 获取焦点var Sel = document.selection.createRange (); // 创建选定区域Sel.moveStart('character', -ctrl.value.length); // 移动开始点到最左边位置CaretPos = Sel.text.length; // 获取当前选定区的文本内容长度} // Firefox support (非ie)else if (ctrl.selectionStart || ctrl.selectionStart == '0'){CaretPos =ctrl.selectionStart; // 获取选定区的开始点 }return CaretPos; }

设置光标位置

//ctrl 是dom节点，pos 是要定位到的位置function setCaretPosition(ctrl, pos){//设置光标位置函数 if(ctrl.setSelectionRange) //非ie{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(); // 选定当前区域} }

有一个场景，在微软雅黑字体下，三个空格大概占一个汉字字符的宽度，现在改为两个空格占一个汉字的宽度，用 代替。由于textarea不解析转义字符，所以做一个隐藏的div，先让div解析，然后再把内容取回来放入textarea中即可。由于会出现在一段话中间插入空格，所以用到了光标的获取和设置。

代码如下：

<textarea id="textarta" cols="30" rows="10"></textarea><div id="div" style="display: none"></div>

//在非ie浏览器下//用jq写的代码$('#textarea').keyup(function (e) {//敲入空格时if (e.keyCode == 32) {var index = $(this)[0].selectionStart; //获取光标位置var text = $(this).val();text = text.replace('/ /', ' ');var html = $('#div').html(text).text();$(this).val(html);//设置光标位置//$(this)[0].focus();$(this)[0].setSelectionRange(index, index);}});