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


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 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
jQuery 研究心得 取得属性的值
Nov 30 Javascript
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
React Router v4 入坑指南(小结)
Apr 08 Javascript
简单了解Vue computed属性及watch区别
Jul 10 Javascript
javascript实现简单页面倒计时
Mar 02 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实现定时生成HTML网站首页实例代码
2008/11/20 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
js类 from qq
2006/11/13 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
javascript每日必学之多态
2016/02/23 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
利用Python实现原创工具的Logo与Help
2018/12/03 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
波兰最大的宠物用品网上商店:FERA.PL
2019/08/11 全球购物
三八妇女节趣味活动方案
2014/08/23 职场文书
仲裁协议书
2014/09/26 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
结婚典礼致辞
2015/07/28 职场文书
反邪教学习心得体会
2016/01/15 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python