javascript获取以及设置光标位置
更新时间:2017年02月16日 10:46:29 作者:子匠_Zijor
本文介绍了javascript获取以及设置光标位置的方法,具有很好的参考价值,下面跟着小编一起来看下吧
一. 获取光标位置:
// 获取光标位置 function getCursortPosition (textDom) { 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; }
二. 设置光标位置:
// 设置光标位置 function setCaretPosition(textDom, pos){ 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(); } }
三. 获取选中文字:
// 获取选中文字 function getSelectText() { var 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; }
四. 选中特定范围的文本:
/** * 选中特定范围的文本 * 参数: * textDom [JavaScript DOM String] 当前对象 * startPos [Int] 起始位置 * endPos [Int] 终点位置 */ function setSelectText(textDom, startPos, endPos) { var 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(); } } }
五. 在光标后插入文本:
/** * 在光标后插入文本 * 参数: * textDom [JavaScript DOM String] 当前对象 * value [String] 要插入的文本 */ function insertAfterText(textDom, value) { var 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(); } }
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
相关文章
javascript 变量声明 var,let,const 的区别
这篇文章主要介绍了javascript 变量声明 var,let,const 的区别,变量声明,每种编程语言必不可少的语法,在javascript中,变量的声明相对其他语言来说,算是比较简单的。更多相关的具体内容需要的小伙伴可以参考一下2022-06-06JS 解决Cannot set properties of undefined的问题
遇到这样问题当前的是当前对象或者数组是undefined,但是却用来引用属性或者索引,遇到这样的问题如何解决呢,下面通过本文给大家介绍JS 如何解决Cannot set properties of undefined,需要的朋友可以参考下2024-01-01Egg Vue SSR 服务端渲染数据请求与asyncData
这篇文章主要介绍了Egg Vue SSR 服务端渲染数据请求与asyncData,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-11-11
最新评论