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();
 }
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

时间: 2017-02-15

JavaScript 获取/设置光标位置,兼容Input&amp;&amp;TextArea

JavaScript 获取/设置光标位置,兼容Input&&TextArea. body { margin: 32px; font-family: Verdana, sans-serif; font-size: 13px; } .title { font-size: 18px; font-weight: bolder;margin:40px 0; } .input { width: 50%; font-family: Verdana, sans-serif; font-size: 13px

Javascript实现获取及设置光标位置的方法

本文实例讲述了Javascript实现获取及设置光标位置的方法.分享给大家供大家参考.具体如下: 在项目开发中经常遇到input等设置光标位置到最后的问题,今天我查了一下Google,找到了在IE.Firefox.Opera等主流浏览器的获取光标位置(getCursortPosition)以及设置光标位置(setCursorPosition)的函数. 1. 获取光标位置函数: function getCursortPosition (ctrl) { var CaretPos = 0; // IE

js获取光标位置和设置文本框光标位置示例代码

复制代码 代码如下: <script type="text/javascript">        function getTxt1CursorPosition(){            var oTxt1 = document.getElementById("txt1");            var cursurPosition=-1;            if(oTxt1.selectionStart){//非IE浏览器           

javascript设置文本框光标的方法实例小结

本文实例总结了javascript设置文本框光标的方法.分享给大家供大家参考,具体如下: 对于text //得到光标位置 function getCaret(textbox) { var control = document.activeElement; textbox.focus(); var rang = document.selection.createRange(); rang.setEndPoint("StartToStart",textbox.createTextRange

JS获取DropDownList的value值与text值的示例代码

相关JS: 复制代码 代码如下: <script type="text/javascript" language="javascript">    function SearchChange()    {        var ddl = document.getElementById("DropDownList1")           var index = ddl.selectedIndex; var Value = ddl.o

jQuery简单设置文本框回车事件的方法

本文实例讲述了jQuery简单设置文本框回车事件的方法.分享给大家供大家参考,具体如下: $(document).ready(function () { $("#txt_JumpPager").keydown(function (e) { var curKey = e.which; if (curKey == 13) { $("#lbtn_JumpPager").click(); return false; } }); }); 其中的txt_JumpPager为文本

JQuery设置文本框和密码框得到焦点时的样式

复制代码 代码如下: //设置文本框和密码框得到焦点时的样式 $("#tblReg input[type=text],#tblReg input[type=password]").focus(function () { $(this).addClass("myFocus"); }).blur(function () { $(this).removeClass("myFocus"); }); 注意中间用逗号隔开

js添加删除行和双击变文本框的脚本

js添加删除行和双击变文本框---阿会楠练习作品 *{ font-size:12px; } #myTable{ background:#D5D5D5; color:#333333; } #myTable tr{ background:#F7F7F7; } #myTable tr th{ height:20px; padding:5px; } #myTable tr td{ padding:5px; } function $(obj){ return document.getElementById

Django Form设置文本框为readonly操作

用Django开发网站的时候,前端页面内的文本框总是不能被设置为只读,找了一些资料发现可以在form class里面进行设置. 方法一: 首先在自己创建的form.py文件中创建一个my_info_form 类: ** In form.py file ** """ 1. 利用Django form创建自己需要的表单 """ class my_info_form(forms.Form): user_id = forms.IntegerField()

js限制文本框的输入内容代码分享(3类)

为大家分享的JavaScript限制文本框的输入内容代码如下 <style type="text/css"> <!-- .STYLE1 { color: #0099FF; font-weight: bold; font-size: x-large; } --> </style> <p> </p> <p> </p> <p> </p> <p> </p> <

Angularjs单选框相关的示例代码

本文介绍了Angularjs单选框相关的示例代码,分享给大家.具体如下: 使用angular1.6.5 1.ng 获取ng-repeat遍历出来的radio的value 1)普通形式(不使用ng-repeat) 可以正常显示 <input type="radio" name="t1" ng-model="demo" value="a">a <br> <input type="radio&

js实现点小图看大图效果的思路及示例代码

DOM:就是用JavaScript操作HTML节点. 知识点: 将HTML变成DOM树 看到HTML会画DOM树. 创建节点,添加节点,删除节点 varnodeObj = document.createElement("节点名"); //创建元素节点 document.createTextNode("文本"); //创建文本节点 父节点.appendChild(子节点); //把子节点添加到父节点下 父节点.removeChild(子节点); //获得节点 docu