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


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图像处理—亮度对比度应用案例
Jan 03 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
js+html5实现canvas绘制圆形图案的方法
Jun 05 Javascript
通过设置CSS中的position属性来固定层的位置
Dec 14 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 Javascript
jQuery删除当前节点元素
Dec 07 Javascript
vue移动端实现下拉刷新
Apr 22 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
May 31 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
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导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
全面介绍javascript实用技巧及单竖杠
2016/07/18 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
python实现文本文件合并
2015/12/29 Python
Python多线程爬虫简单示例
2016/03/04 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
Python入门之后再看点什么好?
2018/03/05 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
python实现最小二乘法线性拟合
2019/07/19 Python
如何完美的建立一个python项目
2020/10/09 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
python中字符串的编码与解码详析
2020/12/03 Python
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
缓刑人员的思想汇报
2014/01/11 职场文书
期末自我鉴定
2014/02/02 职场文书
学习雷锋精神心得体会范文
2014/03/12 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
小学六一主持词开场白
2015/05/28 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS
golang为什么要统一错误处理
2022/04/03 Golang