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


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 相关文章推荐
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
JS实现可针对算术表达式求值的计算器功能示例
Sep 04 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 Javascript
JavaScript的Set数据结构详解
Feb 18 Javascript
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 全局变量范围分析
2009/08/07 PHP
php header示例代码(推荐)
2010/09/08 PHP
php模拟post提交数据的方法
2015/02/12 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
基于PHP实现短信验证码发送次数限制
2020/07/11 PHP
jquery UI 1.72 之datepicker
2009/12/29 Javascript
JS 实现完美include载入实现代码
2010/08/05 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
基于pycharm实现批量修改变量名
2020/06/02 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
境外导游求职信
2014/02/27 职场文书
作风建设年度心得体会
2014/10/29 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript