JQuery/PHP

JavaScript 将光标定位于输入框最右侧的方法

阿里云

经常需要这样的场景,用 JS 实现将光标定位于输入框最右侧。

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

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

也想出现在这里?联系我们
创客主机

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

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

  1. <p><input type="text" value="hello"/></p>
  2. <script>
  3.         var input = document.getElementsByTagName('input')[0];
  4.         input.focus();
  5. </script>

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

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

1,调用 focus 方法

2,value 赋值为空

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

  1. <p><input type="text" value="hello"/></p>
  2. <script>
  3.         var input = document.getElementsByTagName('input')[0];
  4.         var val = input.value;
  5.         input.focus();
  6.         input.value = '';
  7.         input.value = val;
  8. </script>

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

JavaScript 将光标定位于输入框最右侧的方法

已有 226 人购买
查看演示升级 VIP立刻购买

收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!