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


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 Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
jquery实现pager控件示例
Apr 09 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
js获取url传值的方法
Dec 18 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
解读ES6中class关键字
Nov 20 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
原生JS实现的简单小钟表功能示例
Aug 30 Javascript
vue-router的钩子函数用法实例分析
Oct 26 Javascript
Vue实现跑马灯效果
May 25 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
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
Python日志模块logging基本用法分析
2018/08/23 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
python中 * 的用法详解
2019/07/10 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
网络体系结构及协议的定义
2014/03/13 面试题
老师自我鉴定范文
2013/12/25 职场文书
中学生运动会入场词
2014/02/12 职场文书
单位绩效考核方案
2014/05/11 职场文书
主持人演讲稿
2014/05/13 职场文书
小学兴趣小组活动总结
2014/07/07 职场文书
地方白酒代理协议书
2014/10/25 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
MongoDB数据库的安装步骤
2021/06/18 MongoDB
青岛市的收音机研制与生产
2022/04/07 无线电