文本框倒叙输入让输入框的焦点始终在最开始的位置_javascript技巧
所谓的文本框倒叙输入是指输入框的焦点始终在最开始的位置，如图所示，当我输入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 >
<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，希望此文能够帮助你！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
寻找抛物线的顶点、焦点和准线的C/C++程序
Sep 05, 2023 pm 05:21 PM
平面上形成一条曲线的点的集合，使得该曲线上的任何点与中心点（称为焦点）等距都是抛物线。抛物线的一般方程 = ax2+bx+c 抛物线的顶点是其最急转弯的坐标，而
jquery怎么去除焦点
Feb 17, 2023 am 10:20 AM
jquery去除焦点的方法：1、通过“document.getElementById('test').focus()”获取焦点；2、使用“document.getElementById('test').blur();”方法移除焦点即可。
使用jQuery实现输入框仅允许输入数字和小数点
Feb 26, 2024 am 11:21 AM
实现jQuery输入框限制数字和小数点输入在Web开发中，我们经常会遇到需求需要控制用户在输入框中输入的内容，比如限制只能输入数字和小数点。这种限制可以通过JavaScript和jQuery来实现。下面将介绍如何使用jQuery实现输入框限制数字和小数点输入的功能。一、HTML结构首先，我们需要在HTML中创建一个输入框，代码如下：
手把手教你用CSS实现简单大气的输入框
Jan 13, 2023 pm 03:55 PM
本篇文章给大家带来了关于CSS的相关知识，其中主要介绍了怎么用CSS实现一个简单又高大上的输入框，手把手教你哦~下面一起来看一下吧，希望对需要的朋友有所帮助。
Vue开发中输入框长度限制的优化方法是什么？
Jun 30, 2023 am 08:44 AM
如何优化Vue开发中的输入框输入长度限制问题引言：在Vue开发过程中，输入框长度限制是一个常见的需求。限制用户在输入框中输入的字符个数有助于保持数据的准确性、优化用户体验以及提高系统的性能。本文将介绍如何优化Vue开发中的输入框输入长度限制问题，以提供更好的用户体验和开发效率。一、使用v-model指令绑定输入框值在Vue开发中，我们通常使用v-model指
如何使用 Vue 实现带标签的输入框？
Jun 25, 2023 am 11:54 AM
随着Web应用的发展，带标签的输入框越来越受欢迎。这种输入框可以让用户更方便地输入数据，同时也方便用户对已输入的数据进行管理和搜索。Vue是一款非常强大的JavaScript框架，它可以帮助我们快速地实现带标签的输入框。本文将介绍如何使用Vue实现带标签的输入框。第一步：创建Vue实例首先，我们需要在页面上创建Vue实例，代码如下：&l
使用PHP函数 'array_unshift' 将元素插入到数组的开始位置
Jul 25, 2023 pm 03:39 PM
使用PHP函数"array_unshift"将元素插入到数组的开始位置PHP是一种广泛使用的服务器端脚本语言，用于创建动态网页。在PHP中，数组是一种非常重要的数据结构，用于存储和操作一组数据。有时候我们需要在数组的开始位置插入一个元素，这时就可以使用PHP内置函数"array_unshift"。"array_unshift"函数的作用
实现HTML页面跳转到PHP页面时姓名输入框的必填要求
Mar 10, 2024 am 10:21 AM
在HTML页面跳转到PHP页面时，如果需要在姓名输入框中加入必填要求，可以通过HTML的表单元素和JavaScript实现。下面将详细介绍如何实现这一功能，并附上具体的代码示例。首先，我们创建一个HTML页面，包含一个表单和一个姓名输入框。在姓名输入框中设置一个“必填”标记，可以通过JavaScript来实现对该输入框的必填验证。当用户点击提交按钮时，如果姓
