当输入框(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移动焦点到最后的更多相关文章

  1. JS实现焦点图轮播效果

    大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到 ...

  2. js中焦点的含义是什么

    焦点即是光标   焦点是在页面上屏幕中闪动的的小竖线,鼠标点击可获得光标,Tab键可按照设置的Tabindex切换焦点

  3. 使用JS取得焦点(focus)元素

    原文链接: Get the Focused Element with JavaScript 原文日期: 2014年3月19日 翻译日期: 2014年3月21日 翻译人员: 铁锚 对于良好的用户体验来说 ...

  4. js获得焦点和失去焦点那些事

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  5. js 设置焦点 判断控件是否获得焦点 判断哪个控件获得焦点

    设置焦点 <html> <head> <title>设置焦点</title> <mce:script language ="javasc ...

  6. JS+css3焦点轮播图PC端

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. js失去焦点触发

    onblur="displayRest($(this))"

  8. JS、JQ实现焦点图轮播效果

    JS实现焦点图轮播效果 效果图: 代码如下,复制即可使用: (不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦) <!DOCTYPE html> <html> ...

  9. js可以关闭android页面上的键盘输入法

    尝试让获取焦点的元素失去焦点,document.activeElement.blur() js实现焦点进入文本框内关闭输入法:imeMode2011-05-26 11:23要用到的东西: imeMod ...

随机推荐

  1. yii2 单页面增删改

    视图层 <style>#tab tr td{    height:40px;    width:100px;}</style><form action="ind ...

  2. PHP header()函数

    对header函数,我用得最多的就是跳转页面和设置字符集,其他的功能用得比较少. 一.设置字符集 其实我们用的最多的在在html代码当中的<meta>标签里面设置字符集.格式如下: < ...

  3. simple grammer

    <?phpecho strlen("Hello world!"); // outputs 12?> <?phpecho str_word_count(" ...

  4. HDU 4576

    http://acm.hdu.edu.cn/showproblem.php?pid=4576 题意:给一个1-n的环,m次操作,每次操作顺时针或逆时针走w步,求最后落在[l,r]区间的概率 dp[i] ...

  5. iOS开发主要参考文档(转载)

    Objective-C,语言的系统详细资料.这是做iOS开发的前题与基础.https://developer.apple.com/library/ios/#documentation/Cocoa/Co ...

  6. Redis 3.0 集群搭建

    Redis 3.0 集群搭建 开启两个虚拟机 分别在两个虚拟机上开启3个Redis实例 3主3从两个虚拟机里的实例互为主备 下面分别在两个虚拟机上安装,网络设置参照codis集群的前两个主机 分别关闭 ...

  7. 【题解】【矩阵】【回溯】【Leetcode】Unique Paths II

    A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...

  8. 【题解】【BST】【Leetcode】Convert Sorted Array to Binary Search Tree

    Given an array where elements are sorted in ascending order, convert it to a height balanced BST.思路: ...

  9. 112. Path Sum

    Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up all ...

  10. AXIOM

    AXIOM是一个实现了延迟构造和拉(pull parsing)解析的轻量级的xml解析器 http://reeboo.iteye.com/blog/317391 http://reeboo.iteye ...