communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > 将光标定位于输入框最右侧实现代码_基础知识

将光标定位于输入框最右侧实现代码_基础知识

WBOY
Libérer： 2016-05-16 17:47:23
original
1206 Les gens l'ont consulté

前端开发过程中，经常需要这样的场景。用JS实现将光标定位于输入框最右侧。

场景一：编辑图片的描述文字


场景二：Script.aculo.us的Ajax.InPlaceEditor类。双击可编辑，编辑后离开可自动更新该区域。

以上场景都需要JS实现将光标定位于输入框最右侧，却不是通过鼠标点入输入框内。

我们知道实现最基本的方法是HTMLElement的focus方法。如下

复制代码 代码如下:




<script> <BR>var input = document.getElementsByTagName('input')[0]; <BR>input.focus(); <BR></script>
　

打开该页面会发现，光标位于输入框的最左侧。效果如下

而现在要实现的是将光标定位于输入框最右侧，需要三个步骤。

1，调用focus方法

2，value赋值为空

3，之前的input的值再赋给自己

复制代码 代码如下:




<script> <BR>var input = document.getElementsByTagName('input')[0]; <BR>var val = input.value; <BR>input.focus(); <BR>input.value = ''; <BR>input.value = val; <BR></script>

运行后效果如图，光标在深入框最右侧

Étiquettes associées：
右侧 输入框
source：php.cn
Article précédent：javascrpt绑定事件之匿名函数无法解除绑定问题_基础知识 Article suivant：JavaScript中__proto__与prototype的关系深入理解_基础知识
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
En vue mobile, comment fermer cette barre de navigation lorsque l'utilisateur clique sur le lien ? Lorsque l'utilisateur clique sur un lien pour naviguer sur le site Internet, la barre de n...
Depuis 2024-04-06 19:23:03
0
1
411
Personnalisez l'apparence des en-têtes accordéon Bootstrap à l'aide de la classe CollapseDisplay Je souhaite styliser le titre de la carte d'un panneau avec la classeeffondrementshow. Dan...
Depuis 2024-04-06 12:53:11
0
1
376
Le rembourrage du parent ignoré par l'enfant en position collante Comment empêcher les éléments collants de passer derrière le collecteur ? L'extrait de cod...
Depuis 2024-04-06 11:42:51
0
1
338
Impossible d'implémenter cette redirection htaccess J'ai un maindomain.com qui contient un site Web et certaines pages ici doivent être tempor...
Depuis 2024-04-04 23:43:51
0
1
1376
Titre du tableau pivoté verticalement, centré + aligné en bas, multi-navigateur J'ai un tableau avec des en-têtes pivotés qui ressemble à prévu dans Chrome, mais pas dans...
Depuis 2024-04-04 16:45:25
0
1
330
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal