最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
javascript获取以及设置光标位置
时间:2017-04-10 编辑:简简单单 来源:一聚教程网
一. 获取光标位置:
代码如下 | 复制代码 |
// 获取光标位置 functiongetCursortPosition (textDom) { varcursorPos = 0; if(document.selection) { // IE Support textDom.focus (); varselectRange = document.selection.createRange(); selectRange.moveStart ('character', -textDom.value.length); cursorPos = selectRange.text.length; }elseif(textDom.selectionStart || textDom.selectionStart ==Ɔ') { // Firefox support cursorPos = textDom.selectionStart; } returncursorPos; } |
二. 设置光标位置:
代码如下 | 复制代码 |
// 设置光标位置 functionsetCaretPosition(textDom, pos){ if(textDom.setSelectionRange) { // IE Support textDom.focus(); textDom.setSelectionRange(pos, pos); }elseif(textDom.createTextRange) { // Firefox support varrange = textDom.createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } } |
三. 获取选中文字:
代码如下 | 复制代码 |
// 获取选中文字 functiongetSelectText() { varuserSelection, text; if(window.getSelection) { // Firefox support userSelection = window.getSelection(); }elseif(document.selection) { // IE Support userSelection = document.selection.createRange(); } if(!(text = userSelection.text)) { text = userSelection; } returntext; } |
四. 选中特定范围的文本:
代码如下 | 复制代码 |
/** * 选中特定范围的文本 * 参数: * textDom [JavaScript DOM String] 当前对象 * startPos [Int] 起始位置 * endPos [Int] 终点位置 */ functionsetSelectText(textDom, startPos, endPos) { varstartPos = 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 varrange = 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(); } } } |
五. 在光标后插入文本:
代码如下 | 复制代码 |
/** * 在光标后插入文本 * 参数: * textDom [JavaScript DOM String] 当前对象 * value [String] 要插入的文本 */ functioninsertAfterText(textDom, value) { varselectRange; if(document.selection) { // IE Support textDom.focus(); selectRange = document.selection.createRange(); selectRange.text = value; textDom.focus(); }elseif(textDom.selectionStart || textDom.selectionStart ==Ɔ') { // Firefox support varstartPos = textDom.selectionStart; varendPos = textDom.selectionEnd; varscrollTop = 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(); } } |
-
上一个: 原生js实现秒表计时器功能
-
下一个: js模态对话框使用方法详解
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31