将input中的光标移动到文字的末尾后,怎么用js显示光标当前的位置?
2015-10-12 23:37
1436 查看
将input中的光标移动到文字的末尾后,怎么用js显示光标当前的位置?
鉴于加深对window.document的理解,写了点东西加深印象需求:
在点击了编辑之后,直接重置光标的位置和显示光标当前所在的位置,即是显示input输入框中文字的最后的位置(如图3),而不是一下图2的效果
这里需要点击了a标签之后进行编辑昵称:
这个是编辑之前的效果:
现在点击了之后是这样的效果:
我想要的效果是这样的:
移动光标至末尾
$("#user_name").css("display","inline").val(user_name);//赋值 moveEnd($("#user_name").get(0));//移动光标至末尾,且切换selection的位置 function moveEnd(obj){ obj.focus(); var len = obj.value.length; alert(len); if (document.selection) { var sel = obj.createTextRange(); sel.moveStart('character',len); //设置开头的位置 sel.collapse(); sel.select(); } else if (typeof obj.selectionStart == 'number' && typeof obj.selectionEnd == 'number') { obj.selectionStart = obj.selectionEnd = len; } }
选中文本框中的一段文字
<script language=javascript> function sel(obj,num) { var rng=obj.createTextRange() var sel = rng.duplicate(); sel.moveStart("character", num); sel.setEndPoint("EndToStart", rng); sel.select(); } </script> <input type="text" id="text1" value="1234567890"> <select onchange="sel(text1,this.value)"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> </select>
对document.selection的知识点补充.
[document.selection]http://www.cnblogs.com/rainman/archive/2011/02/27/1966482.html[segmentFault]http://segmentfault.com/q/1010000003843756?_ea=391298
1-selection-博客园大声的脑补
2-各种奇葩对光标操作的详情
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- IE8开发人员工具教程(二)
- 通过Mootools 1.2来操纵HTML DOM元素
- WEB标准网页布局中尽量不要使用的HTML标签
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法