当输入框(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. HDOJ-三部曲一(搜索、数学)-1003-Curling 2.0

    Curling 2.0 Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 131072/65536K (Java/Other) Total ...

  2. WebService是什么?

    一.序言 大家或多或少都听过WebService(Web服务),有一段时间很多计算机期刊.书籍和网站都大肆的提及和宣传WebService技术,其中不乏很多吹嘘和做广告的成分.但是不得不承认的是Web ...

  3. 3、C#基础整理(语句概述)

    语句 语句分为四个大类: * 分支语句:if,if... else,if ...else if... else,switch case * 循环语句:for,while,do while,foreac ...

  4. Unity3D ShaderLab Half Lambert光照模型

    Half Lambert光照模型 说到Half Lambert ,就不得不说反恐精英了,在制作反恐精英的过程中,为了防止物体的背面光丢失而显得太过平面化,就用了这个称之为half lambert的技术 ...

  5. 数据库 SQL优化

    1.对查询进行优化,要尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  6. 文件夹差异文件对比工具 meld

    /***************************************************************************************** * 文件夹差异文件 ...

  7. 《深入浅出Node.js》第2章 模块机制

    @by Ruth92(转载请注明出处) 第2章 模块机制 JavaScript 先天缺乏的功能:模块. 一.CommonJS 规范: JavaScript 规范的缺陷:1)没有模块系统:2)标准库较少 ...

  8. Hierarchical Token Bucket

    例子一: # tc qdisc add dev eth0 root handle 1: htb default 30 # tc class add dev eth0 parent 1: classid ...

  9. python 中 sorted() 和 list.sort() 的用法

    今天用python自带的sorted对一个列表进行排序, 在这里总结一下 只要是可迭代对象都可以用sorted . sorted(itrearble, cmp=None, key=None, reve ...

  10. ZOJ Problem Set - 3643 Keep Deleting

    题目大意: 给出a和b串,a是b串的子串,如果b串有连续的a串,那么就将b串的a串删除,问删除多少次: 题目分析: 打比赛的时候没敲出来,后来想到用栈的思想去模拟就行,网上还有用KMP+栈去做的,没有 ...