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


Posted in Javascript onNovember 04, 2016

本文实例总结了javascript设置文本框光标的方法。分享给大家供大家参考,具体如下:

对于text

//得到光标位置
function getCaret(textbox) {
  var control = document.activeElement;
  textbox.focus();
  var rang = document.selection.createRange();
  rang.setEndPoint("StartToStart",textbox.createTextRange())
  control.focus();
  return rang.text.length;
}

对于textarea

function getCaret(ZysrID) 
{
 var txb = document.getElementById(ZysrID);//根据ID获得对象
 var pos = 0;//设置初始位置
 txb.focus();//输入框获得焦点,这句也不能少,不然后面会出错,血的教训啦.
 var s = txb.scrollTop;//获得滚动条的位置
 var r = document.selection.createRange();//创建文档选择对象
 var t = txb.createTextRange();//创建输入框文本对象
 t.collapse(true);//将光标移到头
 t.select();//显示光标,这个不能少,不然的话,光标没有移到头.当时我不知道,搞了十几分钟
 var j = document.selection.createRange();//为新的光标位置创建文档选择对象
 r.setEndPoint("StartToStart",j);//在以前的文档选择对象和新的对象之间创建对象,妈的,不好解释,我表达能力不算太好.有兴趣自己去看msdn的资料
 var str = r.text;//获得对象的文本
 var re = new RegExp("[//n]","g");//过滤掉换行符,不然你的文字会有问题,会比你的文字实际长度要长一些.搞死我了.我说我得到的数字怎么总比我的实际长度要长.
 str = str.replace(re,"");//过滤
 pos = str.length;//获得长度.也就是光标的位置
 r.collapse(false);
 r.select();//把光标恢复到以前的位置
 txb.scrollTop = s;//把滚动条恢复到以前的位置
}

设置光标函数

function setCaret(id,pos)
{
var textbox = document.all(id);

var r = textbox.createTextRange(); 

r.collapse(true); 

r.moveStart('character',pos); 

r.select();
}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
jquery 操作DOM案例代码分享
Apr 05 Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 Javascript
jQuery统计指定子元素数量的方法
Mar 17 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
js判断上传文件后缀名是否合法
Jan 28 Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 #Javascript
JS创建对象的写法示例
Nov 04 #Javascript
微信公众号支付H5调用支付解析
Nov 04 #Javascript
AngularJS用户选择器指令实例分析
Nov 04 #Javascript
AngularJS实现动态编译添加到dom中的方法
Nov 04 #Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 #Javascript
AngularJS中watch监听用法分析
Nov 04 #Javascript
You might like
php 生成文字png图片的代码
2011/04/17 PHP
php array的学习笔记
2012/05/16 PHP
尽可能写"友好"的"Javascript"代码
2007/01/09 Javascript
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
javascript 浏览器检测代码精简版
2010/03/04 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
Javascript中的数据类型之旅
2015/10/18 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
js实现网页收藏功能
2015/12/17 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
Javascript获取图片原始宽度和高度的方法详解
2016/09/20 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
基于canvas实现手写签名(vue)
2020/05/21 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
Python入门篇之面向对象
2014/10/20 Python
python字符串替换的2种方法
2014/11/30 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
java判断三位数的实例讲解
2019/06/10 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
竞选演讲稿范文大全
2014/05/12 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
2014年科技工作总结
2014/11/26 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书