本文主要是介绍光标操作知多少？（input textarea 操作），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
原文网址：http://blog.csdn.net/spy19881201/article/details/38360613
亲测IE情况下textarea不兼容，有时间回来改
本文带你领略input textarea 光标操作：
首先，对于ie和非ie要特殊处理，前端常识！
ie： range.moveStart("character", start);
range.moveEnd('character', index);
非IE：el.setSelectionRange(start, end);
非IE的调用方式简单，不多解释；IE下的操作解释下，ie下有个叫textRange的东西，用来控制光标的相关操作的，可以参考这里（http://msdn.microsoft.com/en-us/library/ie/ms535872(v=vs.85).aspx）
在操作ie下的textarea时，参考了这篇美文 http://blog.csdn.net/qimiguang/article/details/10474189 赞！
效果图：
这里附上源码：
<!DOCTYPE html>
<html>
<head><meta http-equiv="content-type" content="text/html;charset=UTF-8"/><title>input 操作光标在最后</title>
</head>
<body>
<div style=" margin: auto;width: 800px"><div><input type="radio" name="radio" checked οnclick="radioChange(event);" value="1"><input id="name" type="text" value="my name is Willian smith" style="width: 200px"><input type="radio" name="radio" οnclick="radioChange(event);" value="2"><textarea id="content" style="width: 200px">my name is Willian smith</textarea></div><div><button οnclick="focusFirstFun();">光标在最前面</button><button οnclick="focusEndFun();">光标在最后面</button><button οnclick="focusIndexFun();">光标在第二个字符之后</button><button οnclick="focusPosFun();">光标位置</button><button οnclick="focusBeforeFun();">光标前移</button><button οnclick="focusNextFun();">光标后移</button></div><div><button οnclick="focus5Fun();">选中前五个字符</button></div><div><p>光标位置：<span id="cursorLabel"></span></p></div>
</div><script type="text/javascript">
var cursorLabel = document.getElementById('cursorLabel'),el = document.getElementById('name');// el = document.getElementById('content');function radioChange(event) {var radio = event.target;if (radio.value == '1') {el = document.getElementById('name');} else if (radio.value == '2') {el = document.getElementById('content');}
}function focusFirstFun() {focusFirst(el);
}function focusEndFun() {focusEnd(el);
}function focusIndexFun() {focusIndex(el, 2)
}function focus5Fun() {focus(el, 0, 5);
}function focusPosFun() {cursorLabel.innerHTML = focusPos(el);
}function focusBeforeFun() {focusMove(el, -1);
}function focusNextFun() {focusMove(el, 1);
}/***************通用接口**********************/function focusFirst(el) {focus(el, 0, 0);
}function focusIndex(el, start) {focus(el, start);
}function focusEnd(el) {focus(el, el.value.length, el.value.length);
}function focus(el, start, index) {start = start === undefined ? 0 : start;index = index === undefined ? 0 : index;if (el.createTextRange) {//IE浏览器var range = el.createTextRange();range.collapse(true);range.moveStart("character", start);range.moveEnd('character', index);range.select();} else {//非IE浏览器var end = index === 0 ? start : index;el.setSelectionRange(start, end);el.focus();}
}function focusMove(el, index) {if (el.createTextRange) {//IE浏览器el.focus();var range = document.selection.createRange();range.collapse(false);var tempRange = document.selection.createRange();if (el.tagName.toLowerCase() == 'textarea') {var pos = getCursorPosition(el);if (pos.start <= 0) {index = 0;}} else { //inputtempRange.setEndPoint("StartToStart", el.createTextRange());if (tempRange.text.length < 0) {index = 0;}}range.move("character", index);range.select();} else {//非IE浏览器var newPos = el.selectionStart + index;var start = end = newPos <= 0 ? 0 : newPos;el.setSelectionRange(start, end);el.focus();}
}function focusPos(el) {var start = 0;if (el.createTextRange) {//IE浏览器el.focus();var range = document.selection.createRange();range.collapse(false);var tempRange = document.selection.createRange();if (el.tagName.toLowerCase() == 'textarea') {var pos = getCursorPosition(el);start = pos.start <= 0 ? 0 : pos.start;} else { //inputtempRange.setEndPoint("StartToStart", el.createTextRange());start = tempRange.text.length;}} else {//非IE浏览器start = el.selectionStart;}if (window.console) {console.log(start);}return start;
}/*** getCursorPosition Method** Created by Blank Zheng on 2010/11/12.* Copyright (c) 2010 PlanABC.net. All rights reserved.** The copyrights embodied in the content of this file are licensed under the BSD (revised) open source license.*/
function getCursorPosition(textarea) {var rangeData = {text: "", start: 0, end: 0 };textarea.focus();if (textarea.setSelectionRange) { // W3CrangeData.start = textarea.selectionStart;rangeData.end = textarea.selectionEnd;rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end) : "";} else if (document.selection) { // IEvar i,oS = document.selection.createRange(),// Don't: oR = textarea.createTextRange()oR = document.body.createTextRange();oR.moveToElementText(textarea);rangeData.text = oS.text;rangeData.bookmark = oS.getBookmark();// object.moveStart(sUnit [, iCount])// Return Value: Integer that returns the number of units moved.for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i++) {// Why? You can alert(textarea.value.length)if (textarea.value.charAt(i) == '\n') {i++;}}rangeData.start = i;rangeData.end = rangeData.text.length + rangeData.start;}return rangeData;
}
/*** setCursorPosition Method** Created by Blank Zheng on 2010/11/12.* Copyright (c) 2010 PlanABC.net. All rights reserved.** The copyrights embodied in the content of this file are licensed under the BSD (revised) open source license.*/
function setCursorPosition(textarea, rangeData) {if (!rangeData) {alert("You must get cursor position first.")}if (textarea.setSelectionRange) { // W3Ctextarea.focus();textarea.setSelectionRange(rangeData.start, rangeData.end);} else if (textarea.createTextRange) { // IEvar oR = textarea.createTextRange();// Fixbug :// In IE, if cursor position at the end of textarea, the setCursorPosition function don't workif (textarea.value.length === rangeData.start) {oR.collapse(false)oR.select();} else {oR.moveToBookmark(rangeData.bookmark);oR.select();}}
}
</script>
</body>
</html>这篇关于光标操作知多少？（input textarea 操作）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
