输入框input或内容区域textarea中关于光标移动问题

2024-04-11 21:54:00

作者：心叶
时间：2018-09-13 12:28

什么是光标

页面上输入框中闪烁的光标其实是一个选区，也就是选区的左边界和右边界直接形成的选区。

非IE浏览器

输入框结点input=document.getElementById('#input')有二个属性： selectionStart、selectionEnd，分别代表选区开始位置，选区结束位置。

通过修改这二个值就可以形成选区，宽度为0也就实现了光标的位置控制和获取。

IE浏览器

IE浏览器提供的API更加丰富：
createTextRange()、 document.selection.createRange()、moveStart() 、moveEnd() 、move() 、collapse() 、text 、select()。

第一步：

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

第二步：一些操作

range.collapse(boolean);

可以传入一个布尔值作为参数,参数默认值为true，指示向左还是向右压缩

range.moveStart(param1,param2);

第一个参数可选值有 character、word、sentence、textedit. 比如character，即根据字符来偏移。第二个参数代表偏移的多少，正负表示方向。


range.moveEnd(param1,param2);

和上面那个方法参数一样，不同的是这是用来移动结束边界

第三步：

range.select();  //将range包含的区域选中。

需要注意的是：在调用range.select()方法之前，选区对象的内容并不会被添加选中效果

补充：

var range = document.selection.createRange();

这个方法根据当前页面中的选中文字区域来创建一个选区对象，这个选区对象与createTextRange方法的到选区对象的区别在于，它的选区范围为页面选中文字的区域，即它的左右边界不再是默认的左最小右最大。

range.move(param1,param2);

和moveStart参数一样，对于移动光标比较友好。

输入框input或内容区域textarea中关于光标移动问题相关推荐

javascript监听输入框_html通过JS/jQuery实现实时监听输入框input的内容
最近在做一个功能:联想搜索功能.具体实现做法如下:通过实时监听输入框input的内容,来实时发起网络请求,向后台获取联想到的搜索内容并展示到前台.那么该如何实现input的实时监听呢做法一(jQue ...
Vue.js 极简小例：表单（输入框 input、文本域 textarea、单选框 radio、下拉菜单 selected、复选框 checkbox）
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 代码: <template> <div > <p>------- ...
[zt]如何用Javascript获得TextArea中的光标位置
小弟最近在写一个在线编辑器,UBB版的,由于没有使用弹出窗口,所以,在添加代码的时候,只能添在TextArea的最后面,无法在光标之前插入,于是在网上疯狂的找资料,工夫不负有心人,终于被我找到了如何获 ...
html 输入框防止自动记忆,网页输入框input填写内容自动记忆功能怎么去除
我们在做前端的html网页模板的时候,免不了要制作一些输入框,供使用者输入信息实现人机交互.一般情况下我们都会使用如下的HTML代码来生成单行输入框: 这是一个很简单的HTML代码,其效果就是可以在前 ...
jquery.inputmask.js 输入框input输入内容格式限制插件
今天使用的就是这几行代码. 利用 jquery.inputmask.js 下载地址(如果打不开的话请FQ http://plugins.jquery.com/jquery.inputmask/) ...
extjs获取焦点和失去焦点_ios输入框（input，select，textarea）失去焦点，页面不归位...
我是一块砖,哪里需要往哪搬! 移动项目开发中经常会遇到奇奇怪怪的问题,在正常不过了.而由于ios和安卓系统的不同,适配问题也是时常发生. 而其实一个,苹果手机输入框(input,select,text ...
JS控制在textarea中换行
好久没记东西了,今天遇到个小问题折腾了好一会,记录一下. 如何在前台JS代码中控制文字内容在Textarea中换行: var result = "";for ( var int = ...
input和textarea中字体样式不同的解决方法
当我们写一个输入框群组时,input和textarea中字体样式会不同,比如下面: 里面输入的字也不一样: 代码在这里: html: <div style="margin: 0 aut ...
Vue中实现输入框Input输入格式限制
Vue中实现输入框Input输入格式限制 1.使用修饰符实现数字输入在VUE中可以在v-modal后添加修饰符的形式来限制输入,比如: <input v-model.number=" ...
微信小程序---获取输入框(input)内容
在wxml中设置输入框,其中placeholder是输入框还没有输入内容时显示的内容. <input class='create-title' placeholder="投票标题&qu ...

最新文章

热门文章