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 相关文章推荐
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
微信小程序-详解数据缓存
Nov 24 Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 Javascript
利用node.js制作命令行工具方法教程(一)
Jun 22 Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 Javascript
js图片轮播插件的封装
Jul 21 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
vue百度地图 + 定位的详解
May 13 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实现mysql数据库备份类
2008/03/20 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
React组件refs的使用详解
2018/02/09 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
如何在JavaScript中创建具有多个空格的字符串?
2020/02/23 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
详解python基础之while循环及if判断
2017/08/24 Python
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
python skimage 连通性区域检测方法
2018/06/21 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
python多进程读图提取特征存npy
2019/05/21 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
pytorch数据预处理错误的解决
2020/02/20 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
采购意向书范本
2014/03/31 职场文书
高中教师考核方案
2014/05/18 职场文书
商场租赁意向书
2014/07/30 职场文书
销售经理岗位职责
2015/01/31 职场文书
学生病假条范文
2015/08/17 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python