文本框倒叙输入让输入框的焦点始终在最开始的位置


Posted in Javascript onSeptember 01, 2014

所谓的文本框倒叙输入是指输入框的焦点始终在最开始的位置,如图所示,当我输入123456789时,在输入框上显示的是987654321。
文本框倒叙输入让输入框的焦点始终在最开始的位置

为什么要做这个Demo?是因为在项目中遇到了,项目需求是两个输入框,一个正序输入,另一个倒叙输入。 下面我把实现的思路和代码写出来。
文本倒叙输入:

只要我们保证输入框的焦点始终在第一位,这样的话就可以实现每次我们输入的都在最前面,即倒叙

代码:

function setPosition(ctrl, pos) { //设置光标位置函数
if (ctrl.setSelectionRange) {
ctrl.focus();
ctrl.setSelectionRange(pos, pos);
} else if (ctrl.createTextRange) {
var range = ctrl.createTextRange(); //创建一个选择区域
range.collapse(true); //将光标移动到选择区域的开始位置
range.moveEnd('character', pos); //改变选择区域结束的位置
range.moveStart('character', pos); //改变选择区域开始的位置
range.select(); //将选择的内容同步到当前的对象
}
}

只要我们将参数pos设为0就可以了。

下面是一个完整的Demo,这个Demo实现了正常删除和倒叙输入。

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
.content {
width: 300px;margin:0 auto;margin-top:50px;
}
ul {
list-style: none;
}
.elem {
width: 200px;
}

</style>
<script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
</head>
<body>
<div style="">
<ul>
<li>
<input type="text" class="elem">
</li>
<li>
<input type="text" class="elem">
</li>
<li>
<input type="text" class="elem">
</li>
</ul>
</div>
<script>
function setPosition(ctrl, pos) { //设置光标位置函数
if (ctrl.setSelectionRange) {
ctrl.focus();
ctrl.setSelectionRange(pos, pos);
} else if (ctrl.createTextRange) {
var range = ctrl.createTextRange(); //创建一个选择区域
range.collapse(true); //将光标移动到选择区域的开始位置
range.moveEnd('character', pos); //改变选择区域结束的位置
range.moveStart('character', pos); //改变选择区域开始的位置
range.select(); //将选择的内容同步到当前的对象
}
}
$('.elem').on('keypress keyup', function() {
if(event.keyCode === 8)
return;
setPosition(this,0);
});
</script>
</body>
</html>

另外在附上相关的获取焦点位置的函数,可能你会用到

function getPosition(ctrl) {
// IE Support
var CaretPos = 0; 
if (document.selection) {
ctrl.focus();
var Sel = document.selection.createRange();
Sel.moveStart('character', -ctrl.value.length);
CaretPos = Sel.text.length;
}
// Firefox support
else if (ctrl.selectionStart || ctrl.selectionStart == '0')
CaretPos = ctrl.selectionStart;
return (CaretPos);
}

总结:

实现了设置和获取文本输入焦点,我们就可以做一些其他的特效,比如删除一整个单词或者变量等等。

如果你有关于此文的好想法,可以@me,希望此文能够帮助你!

Javascript 相关文章推荐
javascript下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
JS location几个方法小姐
Jul 09 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
Mar 28 Javascript
Javascript中的this绑定介绍
Sep 22 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
Angularjs 事件指令详细整理
Jul 27 Javascript
nginx配置React静态页面的方法教程
Nov 03 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 #Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 #Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 #Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 #Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 #Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 #Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 #Javascript
You might like
中国收音机工业发展史
2021/03/02 无线电
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
flexigrid 参数说明
2010/11/23 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
2011/03/01 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
js中的面向对象入门
2017/03/06 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
ES6 class的应用实例分析
2019/06/27 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
Python使用docx模块实现刷题功能代码
2020/02/13 Python
海信商城:海信电视、科龙空调、容声冰箱官方专卖
2017/02/07 全球购物
2014年巴西世界杯口号
2014/06/05 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
在职证明书模板
2015/06/15 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
青年志愿者活动感想
2015/08/07 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android