将光标定位于输入框最右侧实现代码


Posted in Javascript onDecember 04, 2012

前端开发过程中,经常需要这样的场景。用JS实现将光标定位于输入框最右侧。

场景一:编辑图片的描述文字

将光标定位于输入框最右侧实现代码
场景二:Script.aculo.us的Ajax.InPlaceEditor类。双击可编辑,编辑后离开可自动更新该区域。

以上场景都需要JS实现将光标定位于输入框最右侧,却不是通过鼠标点入输入框内。

我们知道实现最基本的方法是HTMLElement的focus方法。如下

<p> 
<input type="text" value="hello"/> 
</p> 
<script> 
var input = document.getElementsByTagName('input')[0]; 
input.focus(); 
</script>
 

打开该页面会发现,光标位于输入框的最左侧。效果如下

将光标定位于输入框最右侧实现代码

而现在要实现的是将光标定位于输入框最右侧,需要三个步骤。

1,调用focus方法

2,value赋值为空

3,之前的input的值再赋给自己

<p> 
<input type="text" value="hello"/> 
</p> 
<script> 
var input = document.getElementsByTagName('input')[0]; 
var val = input.value; 
input.focus(); 
input.value = ''; 
input.value = val; 
</script>

运行后效果如图,光标在深入框最右侧

将光标定位于输入框最右侧实现代码

Javascript 相关文章推荐
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
Dec 19 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 Javascript
vue elementUI批量上传文件
Apr 26 Vue.js
JavaScript中__proto__与prototype的关系深入理解
Dec 04 #Javascript
js 限制数字 js限制输入实现代码
Dec 04 #Javascript
JSON语法五大要素图文介绍
Dec 04 #Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 #Javascript
cument.execCommand()用法深入理解
Dec 04 #Javascript
页面只能打开一次Cooike如何实现
Dec 04 #Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 #Javascript
You might like
php下intval()和(int)转换使用与区别
2008/07/18 PHP
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
JavaScript 绘制饼图的示例
2021/02/19 Javascript
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
Django小白教程之Django用户注册与登录
2016/04/22 Python
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
json跨域调用python的方法详解
2017/01/11 Python
Python set常用操作函数集锦
2017/11/15 Python
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
详解python itertools功能
2020/02/07 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
python自动下载图片的方法示例
2020/03/25 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
活动志愿者自荐信
2014/01/27 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
员工工作自我评价
2014/09/26 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
文明单位申报材料
2014/12/23 职场文书