将光标定位于输入框最右侧的实现方式

本是古典何须时尚 2022-03-29 10:58 577阅读 0赞

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

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

![2012042011422913.png][]

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

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

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

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

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

![2012042108350524.png][]

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

1.  调用focus方法
2.  value赋值为空
3.  之前的input的值再赋给自己

代码如下

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

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

![2012042108355225.png][]

[2012042011422913.png]: /images/20220329/6087997a8b9e4eb58f7910e149aff68a.png
[2012042108350524.png]: /images/20220329/6b9b638484204af29da070709d35d6b9.png
[2012042108355225.png]: /images/20220329/43eaeacc25c74d47ad9f5cd5570bfcf3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，577人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript实现按键快速获取输入框光标

JavaScript实现按键快速获取输入框光标案例池子： [JS实现鼠标悬停变色 ][JS_] [JavaScript中的排他算法实现按钮单选][JavaS

￡神魔★判官ぃ/ 2024年03月31日 16:12/ 0 赞/ 64 阅读

相关【ios bug解决】输入框聚焦时光标不显示

今天打包出来的app ios端发现input输入时没有光标,但是键盘是有弹出的后来发现是因为引入mui.min.css文件造成的解决办法：重写mui.min.css文件

系统管理员/ 2022年12月17日 10:57/ 0 赞/ 129 阅读

相关 css修改input输入框中的光标颜色——技能提升

今天在看后台系统时，发现系统首页变成了下面的样式。输入框背景颜色改为了白色 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_

太过爱你忘了你带给我的痛/ 2022年09月04日 11:40/ 0 赞/ 285 阅读

相关 editView光标的位置定位

mUserName = (EditText) findViewById(R.id.et\_username); //先获取焦点 mUserName.requestFocu

爱被打了一巴掌/ 2022年07月16日 05:49/ 0 赞/ 317 阅读

相关 android将输入框光标自动移到输入文字最后面

在Activity文件中： EditText et = (EditText)findViewById(R.id.inbox); et.setSelection

Myth丶恋晨/ 2022年06月05日 02:51/ 0 赞/ 251 阅读

相关 js操作光标定位在文本后面（适用于富文本编辑器）

function placeCaretAtEnd(jsDom) { //传入光标要去的jsDom节点 jsDom.focus();

旧城等待，/ 2022年05月26日 13:13/ 0 赞/ 176 阅读

相关 PC端修改input 输入框光标颜色

input 输入框的光标颜色修改方法： 1. 根据字体颜色，即设置color，光标颜色会一起改变 <div class="custom-input">

古城微笑少年丶/ 2022年04月11日 11:58/ 0 赞/ 562 阅读

相关将光标定位于输入框最右侧的实现方式

前端开发过程中，经常需要这样的场景。用JS实现将光标定位于输入框最右侧。场景一：编辑图片的描述文字 ![2012042011422913.png][] 场景二：S

本是古典何须时尚/ 2022年03月29日 10:58/ 0 赞/ 578 阅读

相关 jQuery 将光标定位到文本框input最后一行

<div> <input type="text" id="input_1"/> </div> <script> var t=$('i

逃离我推掉我的手/ 2022年02月17日 14:42/ 0 赞/ 553 阅读

相关定位input的光标，设置光标的位置

最近遇到一个需求，用户在输入框里输入文本的时候，每输入一个字符都要转换成大写，看起来比较简单，但是输入完后在中间插入删除的时候，每添加或者删除一个字符的时候input框

灰太狼/ 2021年11月11日 04:08/ 0 赞/ 875 阅读