光标_如何设置光标位置亚搏app官网:,获取光标所在对象和设置光标位置

作者:亚搏app官网    发布时间:2020-02-09 19:41    浏览:63 次

[返回]

时间: 2018-01-25阅读: 2478标签: 光标

转载:

在js中,光标是几个目的,当你选中某些成分的时候才会产出光标对象。举例:大家点击二个输入框,实际会时有爆发八个当选目的-selection,这一个指标大家得以经过indow.getSelection(卡塔尔国来获得;selection只存在1个,所以当您切换来任何输入框额时候,selection同样会跟着变化的。在当选的气象下有八个光标叫做range,和selection相符。

大器晚成:jquery 恐怕js 获取页面光标所在的要素犹如下三种方法:

在contenteditable 属性中,当点击该区域的时候,光标暗许显示在区域内容最终一人。如:

1.因此枢纽获取光标所在成分

div contenteditable=true这是内容哦!/div

光标所在相同都在文本框里面(该格局只适用于input,textarea卡塔尔国

急需点击才出现光标,并且它之处在剧情区域的最后面,如果大家供给展开页面暗中同意就现身,而且出将来首先个职位上,该怎么兑现呢?上边将给出js的兑现方式:

1
2
3
$("input:focus"//光标所在input元素的位置
$("textarea:focus")//光标所在textarea元素的位置
$("input:focus,textarea:focus")//光标所在元素的位置

方法一:

2。通过点击事件得到光标所在成分

var p = document.getElementById('box'), s = window.getSelection(), r = document.createRange();r.setStart(p, 0);r.setEnd(p, 0);s.removeAllRanges();s.addRange(r);

收获鼠标点击成分的职分(适用于具备因素卡塔尔国

假若您必要把成分清空,大概对应内容为空的时候,你能够这么做:

1
2
3
$("*").click(function(e){
$(e.target)//光标所在元素位置
})
var p = document.getElementById('box'), s = window.getSelection(), r = document.createRange();p.innerHTML = 'u00a0';r.selectNodeContents(p);s.removeAllRanges();s.addRange(r);document.execCommand('delete', false, null);

 

方法二:

二:设置光标地点:

var box= document.getElementById('box');setTimeout(function() { box.focus();}, 0);

写在前边

给box设置获取关节。然后放置setTimeout中,延迟实行。

近来在segmentfault上观察它的日期输入控件,感到挺有意思。好呢,动手写一个,加到本身的代码Curry吧。

亚搏app官网 1

亚搏app官网 2

接下来难点来了,在地点图片中,大家很令人侧目标可以预知这里涉及光标地点的调节。比如说当自家输入1991的3之后,光标必定要得插入到-中写道的下个输入点。

在互连网找了找获得和设置光标位置的点子,开掘是材质是十分的残破,并未三个详尽的介绍。 所以笔者来一个详实的。  好了,不要啰嗦。

中央的认知

文本选中区域   亚搏app官网 3

光标  亚搏app官网 4  页面中闪耀的光标其实就是新鲜的拉长率为0的选区。 简单精通正是选区的左右境界交叉产生了光标。  有了这一个概念上边包车型地铁剧情就很好掌握了。

 

非IE浏览器下的达成

         这里须求用到input成分的七个属性。 

  selectionStart、selectionEnd   选区以前地方,选区甘休地点。

相互代表了当选区域的左右侧界。

多少个值默许都以0,所以当我们使用input.focus(卡塔尔方法时,暗许光标在文书的起头。(注意这里并不是说每一回focus调用光标都冒出在初阶。是因为selectionStart的和selectionEnd的值随着文本输入而退换,因此光标的义务随之校勘。State of Qatar

亚搏app官网 5

文件选中

大家设置

1 input.selectionStart = 0;   //选中区域左边界
2 input.selectionEnd = input.value.length; //选中区域右边界

上面包车型客车代码能够选中输入框的全部内容。 等同于input.select(卡塔尔;

input.selectionStart = 1;   //选中区域左边界
input.selectionEnd = 4; //选中区域右边界

亚搏app官网 6上边的代码选中了234八个字符。

大家怎么获得选中的文本内容吧?  因为早就清楚了selectionStart和selectionEnd,所以用字符串的substring方法

var selection = input.value.substring(input.selectionStart,input.selectionEnd);

 

光标地方

    设置光标

input.selectionStart = 5;   //选中区域左边界
input.selectionEnd = 5; //选中区域右边界

亚搏app官网 7上边的代码把光标放到5的末尾。

    获取光标地方

亚搏app官网 8 直接运用selectionStart和selectionEnd中的自便二个值即光标的职位。

 

IE浏览器下的贯彻

   IE下对此文本流的管理提供了一发强盛的扶植,然则这里笔者只珍视于那篇小说的宏旨。

 用到的主意和总体性先汇总到上面。   

createTextRange()、 document.selection.createRange()

  moveStart() 、moveEnd() 、move() 、collapse() 、text 、select()

----------------- ---- - - -    下面是详细的介绍     -----------------------

   var range = input.createTextRange();        //创建一个文本选区对象。

 

以此选区对象暗中认可满含了input的方方面面文书内容。须求静心的是,那一个选区对象是二个虚无的区域。,在调用range.select()方式早先,选区对象的内容并不会被加多选中效果。

range.select();   //将选区对象包含的内容选中。

亚搏app官网 9

咱俩得以用  range.text品质获得选区包罗的文字

亚搏app官网 10

选区有多少个近乎于任何浏览器中selectionStart和selectionEnd属性的法子,  moveStart和moveEnd

下面我们说过,私下认可那一个选区对象包蕴input的全方位文本内容,所以它的左右境界分别正是文本的始发和终极位置。

moveStart方法用来运动左边界。 像那样调用 

 

range.moveStart("character",2); //左边界右移两个字符 。   character--字符
range.select();  //将range包含的区域选中。

 结果亚搏app官网 11  

moveStart和moveEnd都要传播三个参数,第二个参数可选值有 character、word、sentence、textedit. 这里大家只用到character,即依据字符来偏移。 第一个参数代表偏移的多少,正负表示方向。

作者们驾驭右边界最早默许是0,侧面界暗许是文件内容长度值。

大家注意到每回选中range蕴含区域文本的操作都急需调用range.select(卡塔尔(قطر‎方法,通过select方法来把range对象满含的剧情区域选中。那与地点的任何浏览器的兑现情势常有了大的差距,比较之下就如并未那么平价。可是创立四个包蕴抽象文字区域的选区对象实际提供了越来越大的狡猾。 大家居然能够创设八个选区对象。

 

还大概有叁个很有用的不二等秘书诀 collapse, 见名知意,正是将选区对象的范围减小,上边详细介绍。

collapse能够流传三个布尔值作为参数,参数暗许值为true,提示向左依旧向右压缩。

var range = input.createTextRange(); //创建选区对象
//此时选区对象的左边界为0,右边界为input.value.length;
range.collapse();
//此时选区对象左边界为0,右边界为0; 相当于将选区向左收缩了,即使右边界下标等于左边界下标。
range.select();  //左右边界重合,可以显示光标。

效用如图:亚搏app官网 12      collapse(trueState of Qatar约等于让侧面界下标等于左侧界下标。

 

再试看看collapse(false)

var range = input.createTextRange(); //创建选区对象
//此时选区对象的左边界为0,右边界为input.value.length;
range.collapse(false);
//此时选区对象左边界为input.value.length,右边界为input.value.length; 相当于将选区向右收缩了,即使左边界下标等于右边界下标。
//左右边界重合,可以显示光标。
range.select();

作用如图亚搏app官网 13  能够见见,大家使用collapse(false卡塔尔国结合select方法可以很有益的把光标focus到文本框的末梢。

 

再有叁个move方法

亚搏app官网 14

var range = input.createTextRange(); 
range.moveStart("character",2); 
range.select();  //图一

range.move("character",3);
//等价于 range.collpase(true); range.moveStart("character",3);range.moveEnd("character",3);  三步。合一
range.select(); //图二

亚搏app官网 15

本条方式和moveStart有平等的参数,但是有一点点难以明白。 上面的代码相当于------先将选区向左收缩,这时就也正是二个光标咯,然后将光标右移八个字符。

上边的代码的多少个图, 图生龙活虎亚搏app官网 16  图二亚搏app官网 17

 

当大家要活动光标时,move函数必然是三个丰裕不易的拈轻怕重。

 

document.selection.createRange()

    

本条格局依据近日页面中的选普通话字区域来创设二个选区对象,这些选区对象与createTextRange方法的到选区对象的分别在于,它的选区范围为页面选中文字的区域,即它的左侧面界不再是暗许的左最小右最大。

通过这几个法子大家得以轻易到手光标在输入框中的岗位。  首先你得精通咯光标和选区的涉嫌。

var range = document.selection.createRange(); //根据页面中选中区域创建选区对象。   光标也是特殊的选区
range.moveStart("character",-elem.value.length); //移动左边界到0
var cursorIndex = range.text.length; //选区对象包含文本长度即光标位置

 

 

上面剩下的正是对函数的封装咯。  getCursorKey(卡塔尔 , setCursorKey(卡塔尔(قطر‎ , getSelection(卡塔尔,setSelection(State of Qatar.   

 

亚搏app官网 18

     function getCursor(elem) {
         //IE 9 ,10,其他浏览器
         if (elem.selectionStart !== undefined) {
             return elem.selectionStart;
         } else { //IE 6,7,8
             var range = document.selection.createRange();
             range.moveStart("character", -elem.value.length);
             var len = range.text.length;
             return len;
         }
     }

     function setCursor(elem, index) {
         //IE 9 ,10,其他浏览器
         if (elem.selectionStart !== undefined) {
             elem.selectionStart = index;
             elem.selectionEnd = index;
         } else { //IE 6,7,8
             var range = elem.createTextRange();
             range.moveStart("character", -elem.value.length); //左边界移动到起点
             range.move("character", index); //光标放到index位置
             range.select();
         }
     }

     function getSelection(elem) {
         //IE 9 ,10,其他浏览器
         if (elem.selectionStart !== undefined) {
             return elem.value.substring(elem.selectionStart, elem.selectionEnd);
         } else { //IE 6,7,8
             var range = document.selection.createRange();
             return range.text;
         }
     }

     function setSelection(elem, leftIndex, rightIndex) {
         if (elem.selectionStart !== undefined) { //IE 9 ,10,其他浏览器
             elem.selectionStart = leftIndex;
             elem.selectionEnd = rightIndex;
         } else { //IE 6,7,8
             var range = elem.createTextRange();
             range.move("character", -elem.value.length); //光标移到0位置。
             //这里一定是先moveEnd再moveStart
             //因为如果设置了左边界大于了右边界,那么浏览器会自动让右边界等于左边界。
             range.moveEnd("character", rightIndex);
             range.moveStart("character", leftIndex);
             range.select();
         }
     }

亚搏app官网 19

 

搜索