js移动焦点到最后位置的简单方法


Posted in Javascript onNovember 25, 2016

当输入框(input/textarea)获得焦点时,将焦点移动到最后,在某些情况下用户体验很好。网上的大部分方法都是针对IE浏览器的。

代码如下:

var el = document.getElementById('txtArticle');
var range = el.createTextRange();
range.moveStart('character', el.value.length);
range.collapse(false);
range.select();

其实可以将moveStart这行删除,因为createTextRange方法创建range后,利用collapse方法,参数为false就可以移动到最后了。collapse(true)移动光标到range的开始,collapse(false)移动光标到range的结尾。 Firefox等标准浏览器可以使用w3c的setSelectionRange方法。

代码如下:

var range, el = document.getElementById('txtPhone');
if (el.setSelectionRange) {
  el.focus();
  el.setSelectionRange(el.value.length, el.value.length)
} else {
  range = el.createTextRange();
  range.collapse(false);
  range.select();
}

注意setSelectionRange方法仅适用于input/textarea元素。其它非原生的可编辑元素的焦点移到可以利用selection对象的collapse方法,

例如:

var sel, el = document.getElementById('hint');
sel = window.getSelection();
sel.collapse(el, 1);
el.focus();

以上这篇js移动焦点到最后位置的简单方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
node.js中的http.request.end方法使用说明
Dec 10 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 Javascript
基于jQuery实现仿微博发布框字数提示
Jul 27 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 Javascript
mpvue实现微信小程序快递单号查询代码
Apr 03 Javascript
JS highcharts动态柱状图原理及实现
Oct 16 Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 #Javascript
深入浅析Vue组件开发
Nov 25 #Javascript
javascript中href和replace的比较(详解)
Nov 25 #Javascript
移动适配的几种方案(三种方案)
Nov 25 #Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 #Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 #Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
Nov 25 #Javascript
You might like
php环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
javascript 面向对象编程 function也是类
2009/09/17 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
python散点图实例之随机漫步
2018/08/27 Python
python采集微信公众号文章
2018/12/20 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
李宁官方网店:中国运动品牌
2017/11/02 全球购物
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
人力资源行政经理自我评价
2013/10/23 职场文书
物业经理自我鉴定
2014/03/03 职场文书
工作证明书
2015/06/15 职场文书
如何写观后感
2015/06/19 职场文书
2016党校学习心得体会范文
2016/01/07 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL