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


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 相关文章推荐
jQuery ajax cache缓存问题
Jul 01 Javascript
JavaScript中定义函数的三种方法
Mar 12 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 Javascript
JavaScript实现外溢动态爱心的效果的示例代码
Mar 21 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 DataGrid 实现代码
2009/08/12 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
php实现的短网址算法分享
2014/06/20 PHP
php绘制一条弧线的方法
2015/01/24 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
php实现的http请求封装示例
2016/11/08 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
js url传值中文乱码之解决之道
2009/11/20 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
layui--select使用以及下拉框实现键盘选择的例子
2019/09/24 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
python 性能提升的几种方法
2016/07/15 Python
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
Django配置文件代码说明
2019/12/04 Python
Python列表list操作相关知识小结
2020/01/29 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
教师校本培训方案
2014/02/26 职场文书
协议书怎么写
2014/04/21 职场文书
机关门卫的岗位职责
2014/04/29 职场文书