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


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 相关文章推荐
关于 文本框默认值 的操作js代码
Jan 12 Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
JQuery中clone方法复制节点
May 18 Javascript
Position属性之relative用法
Dec 14 Javascript
AngularJs html compiler详解及示例代码
Sep 01 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 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
php中文本数据翻页(留言本翻页)
2006/10/09 PHP
discuz Passport 通行证 整合笔记
2008/06/30 PHP
各种快递查询--Api接口
2016/04/26 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
ExpressJS入门实例
2015/01/14 Javascript
使用 jQuery 实现表单验证功能
2017/07/05 jQuery
Vue.js 单页面多路由区域操作的实例详解
2017/07/17 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
简单讲解Python中的闭包
2015/08/11 Python
Python定时器实例代码
2017/11/01 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
大专生自我鉴定范文
2013/10/01 职场文书
大一自我鉴定范文
2013/12/27 职场文书
2013年学期结束动员演讲稿
2014/01/07 职场文书
社团文化节邀请函
2014/01/10 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL