js移动焦点到最后位置的简单方法
当输入框(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移动焦点到最后位置的简单方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
js实现文本框中焦点在最后位置
在一般的程序中.程序员做输入框内容正确性检测时一般喜欢通过判断内容的合法性来确定焦点框. 如: 复制代码 代码如下: if(obj.value==""){ obj.focus(); return false;} 这样当哪一项输入框为空是就将焦点移动那一项输入框..这项功能使用起来非常方便..但是存在一个小小的问题... 那就是obj.focus()将焦点移动到输入框后,会将文字光标(就是一闪一闪的竖线)移动到这个输入框的第一个字符的位置...就上面的判断而言..如果文本框中没有
-
js设置文本框中焦点位置在最后的示例代码(简单实用)
在火狐浏览器中直接使用this.focus();即可实现. 在IE中,在this.focus();之后再把文本框的值赋给文本框,焦点即在最后了.很简单哟!! 如: 复制代码 代码如下: var tar=document.getElementByIdx_x("name");if(tar.attachEvent){tar.attachEvent('onmouseover',focus(tar),false);}else{tar.addEventListener('mouseover',fo
-
js移动焦点到最后位置的简单方法
当输入框(input/textarea)获得焦点时,将焦点移动到最后,在某些情况下用户体验很好.网上的大部分方法都是针对IE浏览器的. 代码如下: var el = document.getElementById('txtArticle'); var range = el.createTextRange(); range.moveStart('character', el.value.length); range.collapse(false); range.select(); 其实可以将mov
-
JS实现焦点图轮播效果的方法详解
本文实例讲述了JS实现焦点图轮播效果的方法.分享给大家供大家参考,具体如下: 效果图如下: 一.所用到的知识点 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法 二.结构和样式 <div id="banner" class="banner"> <ul id="list-banner" class="list-banner fn-clear" style="lef
-
JS动态给对象添加事件的简单方法
WEB项目中,我们常常会碰到要动态对相应的对象添加事件,如下,有id="txtPrice"的文本框控件: <div> <input type="text" id="txtPrice" name = "txtPrice" value = "0"/> <div> 现在我们为其动态添加一事件,JS核心代码如下: document.getElementById("txt
-
js中用cssText设置css样式的简单方法
如果网页中一个 id为"no"的标签,暂且当div标签来tell: 想要在js中设置这个div的css样式,很一般的做法是: var obj = document.getElementByIdx_x_x('no'); obj.style.width = '400px'; obj.style.height = '300px'; 如果要设置一堆又一堆的css样式呢,太麻烦了把. 一般情况下都会结合css来添加className或者改变className达到想要的效果,但是如果你create
-
在Node.js应用中读写Redis数据库的简单方法
在开始本文之前请确保安装好 Redis 和 Node.js 以及 Node.js 的 Redis 扩展 -- node_redis 首先创建一个新文件夹并新建文本文件 app.js 文件内容如下: var redis = require("redis") , client = redis.createClient(); client.on("error", function (err) { console.log("Error " + err);
-
js实现瀑布流的一种简单方法实例分享
下面奉上一则用JS实现瀑布流的方法,望批评. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><
-
利用js获取服务器时间的两个简单方法
有时用js来获取服务器时间.一般会用System.DateTime 方法如下: 复制代码 代码如下: <script language="javascript"> var a = new Date() a = <%=System.DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")%>; Response.Write(a) </script> 其实还有一个方法:利用javascript的&quo
-
用js实现计算代码行数的简单方法附代码
一段代码可能有几十行,上千个字符,统计其行数可以先把代码字符串化为数组,再返回该数组的长度即可. 传统做法: <textarea name="abc"> 123456 789 </textarea> <script type="text/javascript"> var counter = 0; var str = abc.value; for(i=0; i<str.length; i++) { if(str.sub
-
jQuery焦点图轮播效果实现方法
本文实例讲述了jQuery焦点图轮播效果实现方法.分享给大家供大家参考,具体如下: 前面一篇<JS实现焦点图轮播效果的方法详解>详细介绍了JS实现焦点图轮播效果的步骤,这里来分析一下jQuery的相关实现技巧. 核心代码如下: $(function(){ var $next=$(".right"); var $prev=$(".left"); var $list_num=$(".list-num a"); var $banner=$(
-
js将滚动条滚动到指定位置的简单实现方法
js将滚动条滚动到指定位置的简单实现方法 代码如下(主要是通过设置Location的hash属性): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&
随机推荐
- 详解IE6中的position:fixed问题与随滚动条滚动的效果
- 自己写的一个定时关机或重启的vbs脚本
- 基于java使用JavaMail发送邮件
- java自定义枚举转换器示例
- Perl ASCII 字符判断
- java.sql.SQLException: 内部错误: Unable to construct a Datum from the specified input
- PHP MSSQL 存储过程的方法
- mysql 表空间及索引的查看方法
- PHP向socket服务器收发数据的方法
- 使用nodejs开发cli项目实例
- jQuery下的Ajax调试步骤
- 算法系列15天速成 第四天 五大经典查找【上】
- jQuery Selectors(选择器)的使用(一、基本篇)
- linux查看系统编码和修改系统编码的方法
- c++实现通用参数解析类示例
- JavaWeb开发入门第一篇必备知识讲解
- Python线程指南详细介绍
- C# 汉字转化拼音的简单实例代码
- Android重写View实现全新的控件
- 魔兽世界教你设置游戏NPC集锦篇