这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 js 实现的光标位置工具函数, 结合实例形式分析了 JavaScript 操作 textarea 文本框光标位置及文本操作相关技巧, 需要的朋友可以参考下
本文实例讲述了 js 实现的光标位置工具函数。分享给大家供大家参考,具体如下:
这里介绍的一款 textarea 中光标位置工具函数的例子。
html 代码:
- <p>
- 文本框:
- </p>
- <textarea name="" id="textarea" cols="30" rows="10">
- sASASADASDasfaDFDsfsDFAfdFADf
- </textarea>
- <button type="button" id="setSelectText">
- 选中特定范围的文本
- </button>
- <button type="button" id="insertAfterText">
- 在光标后插入文本
- </button>
- <br>
- <hr>
- <br>
- <input type="number" name="" id="input">
- <button type="button" id="setCurPosBtn">
- 设置光标位置
- </button>
- <br>
- <hr>
- <br>
- <p id="selectText">
- 我是一段可以选中的文字,请打开控制台查看。我是一段可以选中的文字,请打开控制台查看。我是一段可以选中的文字,请打开控制台查看。
- </p>
js 代码:
- /**
- * 光标位置组件
- * ## selectRange对象的方法:
- * (1)selectRange.of(ele) [创建光标位置获取的新对象]
- 参数:
- ele {{JavaScript DOM}} 光标所在的元素,原生JavaScript DOM
- * (2)selectRange.getCurPos() [获取当前坐标位置]
- * (3)selectRange.setCurPos(pos) [设置当前光标位置]
- 参数:
- pos {{Int}} 当前光标位置
- * (4)selectRange.getSelectText() [获取选中文字]
- * (5)selectRange.setSelectText(startPos, endPos) [选中特定范围的文本(只限于textarea和input)]
- * 参数:
- startPos {{Int}} 起始位置
- endPos {{Int}} 终点位置
- * (6)selectRange.insertAfterText(value) [在光标后插入文本]
- * 参数:
- value {{String}} 要插入的文本
- *
- *
- * ## 使用实例:
- * selectRange.of(EleDom).getCurPos(); // 获取当前坐标位置
- * selectRange.of(EleDom).setCurPos(pos); // 设置当前光标位置为pos
- * selectRange.of(EleDom).getSelectText(); // 获取选中文字
- * selectRange.of(EleDom).setSelectText(startPos, endPos); // 选中startPos到endPos范围的文本
- * selectRange.of(EleDom).insertAfterText(value); // 在光标后插入值为value的文本
- */
- var selectRange = function(ele) {
- this.__element = ele;
- };
- // 创建光标位置获取的新对象
- selectRange.of = function(ele) {
- if (ele) {
- return new selectRange(ele);
- } else {
- return {};
- }
- };
- selectRange.prototype = {
- constructor: selectRange,
- // 获取当前坐标位置
- getCurPos: function() {
- var _this = this,
- textDom = _this.__element;
- // 获取光标位置
- var cursorPos = 0;
- if (document.selection) {
- // IE Support
- textDom.focus();
- var selectRange = document.selection.createRange();
- selectRange.moveStart('character', -textDom.value.length);
- cursorPos = selectRange.text.length;
- } else if (textDom.selectionStart || textDom.selectionStart == '0') {
- // Firefox support
- cursorPos = textDom.selectionStart;
- }
- return cursorPos;
- },
- /**
- * 设置当前光标位置
- * 参数:
- * pos [Int] 当前光标位置
- */
- setCurPos: function(pos) {
- var _this = this,
- textDom = _this.__element;
- if (textDom.setSelectionRange) {
- // IE Support
- textDom.focus();
- textDom.setSelectionRange(pos, pos);
- } else if (textDom.createTextRange) {
- // Firefox support
- var range = textDom.createTextRange();
- range.collapse(true);
- range.moveEnd('character', pos);
- range.moveStart('character', pos);
- range.select();
- }
- },
- // 获取选中文字
- getSelectText: function() {
- var _this = this,
- textDom = _this.__element,
- userSelection, text = "";
- if (window.getSelection) {
- // Firefox support
- userSelection = window.getSelection();
- } else if (document.selection) {
- // IE Support
- userSelection = document.selection.createRange();
- }
- if (! (text = userSelection.text)) {
- text = userSelection;
- }
- return text;
- },
- /**
- * 选中特定范围的文本(只限于textarea和input)
- * 参数:
- * startPos [Int] 起始位置
- * endPos [Int] 终点位置
- */
- setSelectText: function(startPos, endPos) {
- var _this = this,
- textDom = _this.__element,
- startPos = parseInt(startPos),
- endPos = parseInt(endPos),
- textLength = textDom.value.length;
- if (textLength) {
- if (!startPos) {
- startPos = 0;
- }
- if (!endPos) {
- endPos = textLength;
- }
- if (startPos > textLength) {
- startPos = textLength;
- }
- if (endPos > textLength) {
- endPos = textLength;
- }
- if (startPos < 0) {
- startPos = textLength + startPos;
- }
- if (endPos < 0) {
- endPos = textLength + endPos;
- }
- if (textDom.createTextRange) {
- // IE Support
- var range = textDom.createTextRange();
- range.moveStart("character", -textLength);
- range.moveEnd("character", -textLength);
- range.moveStart("character", startPos);
- range.moveEnd("character", endPos);
- range.select();
- } else {
- // Firefox support
- textDom.setSelectionRange(startPos, endPos);
- textDom.focus();
- }
- }
- },
- /**
- * 在光标后插入文本
- * 参数:
- * value [String] 要插入的文本
- */
- insertAfterText: function(value) {
- var _this = this,
- textDom = _this.__element,
- selectRange;
- if (document.selection) {
- // IE Support
- textDom.focus();
- selectRange = document.selection.createRange();
- selectRange.text = value;
- textDom.focus();
- } else if (textDom.selectionStart || textDom.selectionStart == '0') {
- // Firefox support
- var startPos = textDom.selectionStart;
- var endPos = textDom.selectionEnd;
- var scrollTop = textDom.scrollTop;
- textDom.value = textDom.value.substring(0, startPos) + value + textDom.value.substring(endPos, textDom.value.length);
- textDom.focus();
- textDom.selectionStart = startPos + value.length;
- textDom.selectionEnd = startPos + value.length;
- textDom.scrollTop = scrollTop;
- } else {
- textDom.value += value;
- textDom.focus();
- }
- }
- };
- // ===============================================
- // 实例代码
- var textareaDom = document.querySelector("#textarea"),
- setCurPosInput = document.querySelector("#input"),
- setCurPosBtn = document.querySelector("#setCurPosBtn"),
- selectText = document.querySelector("#selectText"),
- setSelectTextBtn = document.querySelector("#setSelectText"),
- insertAfterTextBtn = document.querySelector("#insertAfterText");
- // 获取当前光标位置
- textareaDom.addEventListener("keydown",
- function() {
- console.log("getCurPos: " + selectRange.of(textareaDom).getCurPos());
- },
- false);
- // 设置当前光标位置
- setCurPosBtn.addEventListener("click",
- function() {
- var curPos = parseInt(setCurPosInput.value);
- console.log("curPos: " + curPos);
- selectRange.of(textareaDom).setCurPos(curPos);
- },
- false);
- // 获取选中文字
- selectText.addEventListener("mouseup",
- function() {
- console.log("selectText: " + selectRange.of(this).getSelectText());
- });
- // 选中特定范围的文本
- setSelectTextBtn.addEventListener("click",
- function() {
- selectRange.of(textareaDom).setSelectText(0, 21);
- },
- false);
- // 在光标后插入文本
- insertAfterTextBtn.addEventListener("click",
- function() {
- var insertText = "===hello world, I'm insert content.===";
- selectRange.of(textareaDom).insertAfterText(insertText);
- },
- false);
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0525/331450.html