interface Web
js tutoriel
La saisie flashback de la zone de texte maintient le focus de la zone de saisie toujours au début_compétences javascript
La saisie flashback de la zone de texte maintient le focus de la zone de saisie toujours au début_compétences javascript
La saisie dite flashback de la zone de texte signifie que le focus de la zone de saisie est toujours au début. Comme le montre l'image, lorsque je saisis 123456789, 987654321 est affiché dans la zone de saisie.
Pourquoi veux-tu faire cette démo ? C'est parce que je l'ai rencontré dans le projet. Les exigences du projet sont deux zones de saisie, une pour la saisie avant et l'autre pour la saisie arrière. Ci-dessous, j'écrirai les idées d'implémentation et le code.
Saisie de flashback de texte :
Tant que nous veillons à ce que le focus de la zone de saisie soit toujours à la première place, nous pouvons alors réaliser que chaque fois que nous saisissons, c'est au premier plan, c'est-à-dire un 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(); //将选择的内容同步到当前的对象
}
}Tant qu'on règle le paramètre pos à 0.
Ce qui suit est une démo complète, qui implémente la suppression normale et la saisie flashback.
<!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>De plus, les fonctions associées à l'obtention de la position de mise au point sont jointes, vous pouvez les utiliser
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);
}Résumé :
Après avoir défini et obtenu le focus de saisie de texte, nous pouvons créer d'autres effets spéciaux, tels que la suppression d'un mot ou d'une variable entière, etc.
Si vous avez de bonnes idées pour cet article, vous pouvez me contacter. J'espère que cet article pourra vous aider !
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1358
52
Programme C/C++ pour trouver le sommet, le foyer et la directrice d'une parabole
Sep 05, 2023 pm 05:21 PM
Un ensemble de points sur une surface plane qui forme une courbe telle que tout point de cette courbe soit à égale distance d'un point du centre (appelé foyer) est une parabole. L'équation générale de la parabole est = ax2+bx+c.
Comment supprimer le focus dans jquery
Feb 17, 2023 am 10:20 AM
Comment supprimer le focus dans jquery : 1. Obtenez le focus via "document.getElementById('test').focus()" ; 2. Utilisez la méthode "document.getElementById('test').blur();" la mise au point.
Utilisez jQuery pour implémenter une zone de saisie qui permet uniquement de saisir des nombres et des points décimaux
Feb 26, 2024 am 11:21 AM
Implémentez la zone de saisie jQuery pour limiter la saisie de nombres et de points décimaux. Dans le développement Web, nous rencontrons souvent le besoin de contrôler le contenu saisi par les utilisateurs dans la zone de saisie, par exemple en limitant la saisie de nombres et de points décimaux. Cette restriction peut être réalisée via JavaScript et jQuery. Ce qui suit explique comment utiliser jQuery pour implémenter la fonction de limitation de la saisie de nombres et de points décimaux dans la zone de saisie. 1. Structure HTML Tout d'abord, nous devons créer une zone de saisie en HTML, le code est le suivant :
Apprenez étape par étape à utiliser CSS pour créer une zone de saisie simple et élégante
Jan 13, 2023 pm 03:55 PM
Cet article vous apporte des connaissances pertinentes sur CSS. Il présente principalement comment utiliser CSS pour implémenter une zone de saisie simple et sophistiquée. Je vais vous apprendre étape par étape ~ Jetons-y un coup d'œil ensemble, j'espère que cela sera utile aux amis qui le souhaitent. j'en ai besoin.
Quelle est la méthode d'optimisation de la limite de longueur de la zone de saisie dans le développement de Vue ?
Jun 30, 2023 am 08:44 AM
Comment optimiser la limite de longueur de saisie de la zone de saisie dans le développement de Vue Introduction : Dans le processus de développement de Vue, la limite de longueur de la zone de saisie est une exigence courante. Limiter le nombre de caractères que les utilisateurs saisissent dans la zone de saisie permet de maintenir l'exactitude des données, d'optimiser l'expérience utilisateur et d'améliorer les performances du système. Cet article expliquera comment optimiser la limite de longueur de saisie de la zone de saisie dans le développement de Vue afin d'offrir une meilleure expérience utilisateur et une meilleure efficacité de développement. 1. Utilisez la directive v-model pour lier la valeur de la zone de saisie. Dans le développement de Vue, nous utilisons généralement la directive v-model.
Comment implémenter une zone de saisie étiquetée à l'aide de Vue ?
Jun 25, 2023 am 11:54 AM
Avec le développement des applications Web, les zones de saisie étiquetées deviennent de plus en plus populaires. Ce type de zone de saisie permet aux utilisateurs de saisir des données plus facilement et facilite également la gestion et la recherche des données saisies. Vue est un framework JavaScript très puissant qui peut nous aider à implémenter rapidement des zones de saisie étiquetées. Cet article explique comment utiliser Vue pour implémenter une zone de saisie étiquetée. Étape 1 : Créer une instance Vue Tout d'abord, nous devons créer une instance Vue sur la page, le code est le suivant : &l
Utilisez la fonction PHP 'array_unshift' pour insérer des éléments au début du tableau
Jul 25, 2023 pm 03:39 PM
Insérez un élément au début d'un tableau à l'aide de la fonction PHP "array_unshift" PHP est un langage de script côté serveur largement utilisé pour créer des pages Web dynamiques. En PHP, un tableau est une structure de données très importante utilisée pour stocker et manipuler un ensemble de données. Parfois, nous devons insérer un élément au début du tableau, nous pouvons alors utiliser la fonction intégrée PHP "array_unshift". Que fait la fonction "array_unshift"
Implémentez les exigences requises pour la zone de saisie du nom lorsque la page HTML passe à la page PHP
Mar 10, 2024 am 10:21 AM
Lorsque la page HTML passe à la page PHP, si vous devez ajouter les exigences requises à la zone de saisie du nom, vous pouvez le faire via des éléments de formulaire HTML et JavaScript. Comment implémenter cette fonctionnalité sera décrit en détail ci-dessous, avec des exemples de code spécifiques. Tout d’abord, nous créons une page HTML contenant un formulaire et une zone de saisie de nom. Définissez une marque « obligatoire » dans la zone de saisie du nom et vous pourrez utiliser JavaScript pour implémenter la vérification requise de la zone de saisie. Lorsque l'utilisateur clique sur le bouton Soumettre, si le nom de famille
