Web Front-end
JS Tutorial
Text box flashback input keeps the focus of the input box always at the beginning_javascript skills
Text box flashback input keeps the focus of the input box always at the beginning_javascript skills
The so-called text box flashback input means that the focus of the input box is always at the beginning. As shown in the picture, when I input 123456789, 987654321 is displayed on the input box.
Why do you want to do this demo? It's because I encountered it in the project. The project requirements are two input boxes, one for forward input and the other for backward input. Below I will write out the implementation ideas and code.
Text flashback input:
As long as we ensure that the focus of the input box is always at the first place, then we can realize that every time we input is at the front, that is, flashback
Code:
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(); //将选择的内容同步到当前的对象
}
}As long as we set the parameter pos to 0.
The following is a complete Demo, which implements normal deletion and flashback input.
<!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>In addition, the related functions for obtaining the focus position are attached, you may use them
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);
}Summary:
After setting and getting the text input focus, we can do some other special effects, such as deleting an entire word or variable, etc.
If you have any good ideas for this article, you can @me. I hope this article can help you!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1667
14
1426
52
1328
25
1273
29
1255
24
How to remove focus in jquery
Feb 17, 2023 am 10:20 AM
How to remove focus in jquery: 1. Get the focus through "document.getElementById('test').focus()"; 2. Use the "document.getElementById('test').blur();" method to remove the focus .
C/C++ program to find the vertex, focus and directrix of a parabola
Sep 05, 2023 pm 05:21 PM
Asetofpointsonaplainsurfacethatformsacurvesuchthatanypointonthatcurveisequidistantfromapointinthecenter(calledfocus)isaparabola.Thegeneralequationfortheparabolaisy=ax2+bx+cThevertexofaparabolaisthecoordinatefromwhichittakesthesharpestturnwhereasaisth
Use jQuery to implement an input box that only allows numbers and decimal points to be entered
Feb 26, 2024 am 11:21 AM
Implement jQuery input box to limit the input of numbers and decimal points. In web development, we often encounter the need to control what users input in the input box, such as restricting the input of numbers and decimal points only. This restriction can be achieved through JavaScript and jQuery. The following will introduce how to use jQuery to implement the function of limiting the input of numbers and decimal points in the input box. 1. HTML structure First, we need to create an input box in HTML, the code is as follows:
How to implement a labeled input box using Vue?
Jun 25, 2023 am 11:54 AM
With the development of web applications, labeled input boxes are becoming more and more popular. This kind of input box allows users to input data more conveniently, and also facilitates users to manage and search the entered data. Vue is a very powerful JavaScript framework that can help us quickly implement labeled input boxes. This article will introduce how to use Vue to implement a labeled input box. Step 1: Create a Vue instance First, we need to create a Vue instance on the page, the code is as follows: &l
What is the optimization method for input box length limit in Vue development?
Jun 30, 2023 am 08:44 AM
How to optimize the input box input length limit in Vue development Introduction: In the Vue development process, input box length limit is a common requirement. Limiting the number of characters users enter in the input box helps maintain data accuracy, optimize user experience, and improve system performance. This article will introduce how to optimize the input length limit of the input box in Vue development to provide a better user experience and development efficiency. 1. Use the v-model directive to bind the input box value. In Vue development, we usually use the v-model directive.
Use the PHP function 'array_unshift' to insert elements to the beginning of the array
Jul 25, 2023 pm 03:39 PM
Insert an element to the beginning of an array using the PHP function "array_unshift" PHP is a widely used server-side scripting language for creating dynamic web pages. In PHP, an array is a very important data structure used to store and manipulate a set of data. Sometimes we need to insert an element at the beginning of the array, then we can use the PHP built-in function "array_unshift". What the "array_unshift" function does
Teach you step by step how to use CSS to create a simple and elegant input box
Jan 13, 2023 pm 03:55 PM
This article brings you relevant knowledge about CSS. It mainly introduces how to use CSS to implement a simple and sophisticated input box. I will teach you step by step~ Let’s take a look below. I hope it will be helpful to friends who need it. help.
Implement the required requirements for the name input box when the HTML page jumps to the PHP page
Mar 10, 2024 am 10:21 AM
When the HTML page jumps to the PHP page, if you need to add required requirements to the name input box, you can do so through HTML form elements and JavaScript. How to implement this feature will be described in detail below, with specific code examples. First, we create an HTML page that contains a form and a name input box. Set a "required" mark in the name input box, and you can use JavaScript to implement required verification of the input box. When the user clicks the submit button, if the last name
