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


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 相关文章推荐
免费空间广告万能消除代码
Sep 04 Javascript
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
Aug 07 Javascript
TypeScript 中接口详解
Jun 19 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 Javascript
Vue Render函数原理及代码实例解析
Jul 30 Javascript
Nest.js环境变量配置与序列化详解
Feb 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 Ajax中文乱码问题解决方法
2009/02/27 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
vue脚手架中配置Sass的方法
2018/01/04 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
Python的Tornado框架异步编程入门实例
2015/04/24 Python
Python中动态创建类实例的方法
2017/03/24 Python
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
工商行政管理专业求职书
2014/05/23 职场文书
项目工作说明书
2014/07/29 职场文书
物理课外活动总结
2014/08/27 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
2014年房产经纪人工作总结
2014/12/08 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
2016年春节慰问信息大全
2015/11/30 职场文书
python使用pygame创建精灵Sprite
2021/04/06 Python
python 实现体质指数BMI计算
2021/05/26 Python
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python