js 控制input光标位置

最新推荐文章于 2024-05-09 14:08:24 发布
最新推荐文章于 2024-05-09 14:08:24 发布
阅读量5k 收藏 7
点赞数 3
分类专栏： js 文章标签： 控制input光标位置
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38299934/article/details/90603097
版权 
document.getElementById('code_text').onfocus= function(index){
    this.selectionStart = index;
    this.selectionEnd = index;

}
<input class="code_text" type="tel" maxlength="6"  autofocus="autofocus" id="code_text" />

 

每次点击输入框，光标都会到设置的位置

Peak peak
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html input光标位置,js控制input框内光标位置（setSelectionRange详解）
weixin_39851307的博客
06-05 4140
问题描述前段时间碰到一个需求：在表单中有一个字段叫金额，用户希望点击该输入框后(focus)，能够自动为其金额数字后加上“万元”两个字。虽然这个需求可以通过其他的设计方式规避(例如在文本框后加入“万元”等)，但是，既然碰到了问题，肯定还是希望能够研究一下技术解决方式。对这个需求进行抽象，其实需要完成的任务就是：通过js来控制输入框内光标的位置。要完成这个任务，需要介绍一个input元素的方法：HT...
JavaScript获取,设置光标位置,兼容InputTextArea
12-21
JavaScript获取,设置光标位置,兼容InputTextArea
input通过JS手动向光标、选中位置插入、拼接内容至光标处 选中处
weixin_40362806的博客
11-23 420
input通过JS手动向光标、选中位置插入、拼接内容至光标处 选中处。
移动端input框设置从右侧输入，光标在右侧！！
最新发布
Kiey_Lee的博客
05-09 506
设置input框鼠标光标位置
js 指定光标位置
weixin_35757531的博客
01-07 4308
可以使用 JavaScript 中的 selectionStart 和 selectionEnd 属性来指定光标的位置。 这些属性属于 HTMLInputElement 对象，因此你需要首先将你的输入元素转换为这种类型，然后就可以使用这些属性了。 例如： constinput = document.getElementById('myInput'); input.selectionStart = ...
js控制输入框中的光标位置
AdleyTales的技术博客
11-02 775
【代码】js控制输入框中的光标位置。
input光标操作.html|input光标操作.html
12-03
当opsStart和opsEnd相同时，可用于定位光标位置。 setSelectionRange实际上是改变了selectionStart 和 selectionEnd属性，所以也可以通过直接修改这两个属性来实现 方法二 input.selectionStart = opsStart; input...
JavaScript 获取/设置光标位置,兼容InputTextArea
12-02
在JavaScript中，获取和设置光标位置是常见的需求，特别是在处理用户输入时，例如在`Input`或`TextArea`元素中。以下将详细介绍如何在不同类型的输入元素中实现这一功能，并确保兼容性。 首先，我们需要了解`Input`...
vue获取textarea的光标位置.js
08-13
vue通过当前的光标来进行插值，从而需要去获取光标所在的位置然后进行对光标前后的字符串进行截取处理，从而达到对新字符的插入
js获取光标位置和设置文本框光标位置示例代码
10-26
在JavaScript中，获取和设置文本框（input[type="text"]）或文本域（textarea）的光标位置是一项常见的任务，特别是在实现用户交互功能时。在不同的浏览器中，处理光标位置的方法有所不同，主要分为IE浏览器和其他非...
如何获取与设置光标在input框的位置
热门推荐
在下月亮有何贵干
11-12 1万+
遇到一个场景，需要一些文本标签，点击自动添加进文本框，这时候就需要掌握如何获取与设置光标在input框的位置，做一个记录，记录使用方法。
模拟京东按下s键输入内容2020/11/24
weixin_50286102的博客
11-24 258
模拟京东按下s键输入内容：. 核心思路： 检测用户是否按下了s 键，如果按下s 键，就把光标定位到搜索框里面 使用键盘事件对象里面的keyCode 判断用户按下的是否是s键 搜索框获得焦点： 使用 js 里面的 focus() 方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=
js --- 获取|设置光标位置
Dark_programmer的博客
03-07 1万+
JS光标1. 获取光标位置2. 光标处添加文本且重新设置光标位置 只要是前端开发人员，遇到实现输入框是早晚的事情。而关于光标的处理，又是其重中之重的点。 <textarea v-model="textareaValue" id="textarea" name="content" rows="3" placeholder="请输入内容。。。"> 1. 获取光标位置 以上述标签为例，如何获取该标签的光标位置呢？ function getCursorPosition(){ let element
JS控制光标定位，定位到文本的某个位置
weixin_41869893的博客
04-13 3049
JS控制光标定位，定位到文本的某个位置 这是一个数字密码，要能够智能的跳转到文本的某个位置，就需要通过JS来控制跳转！ 1.onkeyup监听 <input class="put" id="number-password-input" type="tel" maxlength="12" tabindex="6" onkeyup="dealKeyup(this);"> 2.智能判断 // 光标定位 function dealKeyup(that) { var input_val = $
js 设置光标位置到指定input元素
qq_39917399的博客
12-31 2796
setCaretPosition:function (ctrl, pos) { // 大部分浏览器 if(ctrl.setSelectionRange) { ctrl.focus(); ctrl.setSelectionRange(pos, pos); // ...
JS操作文本域获取光标/指定位置插入
pscool的博客
04-13 3064
/ 3. 如果是选中了文本，那么selectionStart就是被选中文字最左边开始的位置的数值（上面已说明），selectionEnd就是被选中文字最右边结束的位置的数值（上面已说明）// 2. 当页面刚加载完，文本域中有默认文字，那么selectionStart和selectionEnd都是相同的数值，都是最后一个位置，即有多少个文字，数值就是多少。// 1. 位置定义：文本框中有文字的话，第一个文字的左边是0，右边是1，第二个文字的左边是1，右边是2。'诺艾尔邀约任务截图'
获取光标位置及动态设置光标到指定位置
WSL_520的博客
06-19 2354
问题场景：页面有一个字段框（可以理解为一个div中有很多label），一个input框，进入页面，input框自动获取焦点，点击每一个label会把label的内容进行处理，比如加个括号（）表示是个函数，自动添加到input框中光标所在位置，并设置光标位置在左括号和右括号之间。 获取input框当前光标所在位置 function getCursurPosition(element) { let cursurPosition = 0; if (document.selection) {//IE
el-input @focus设置光标位置
王也的博客
04-13 4606
setSelectionRange设置的光标范围是(2, 4)是生效的，但鼠标如果点击了input其他位置会覆盖这个设置，例如点击最后的位置，会使(2, 4)变成了(2, 9)当我从下一个input，按键盘shift+tab反选这个input的时候，就发现选中(2, 4)了。随便写个el-input，设置ref、focus、blur属性和方法。获取焦点时设置光标范围(2, 4)
js控制input光标位置
06-10
可以使用 JavaScript 的 Selection API 来控制 input 光标位置。具体方法如下： ```javascript // 获取 input 元素 const input = document.getElementById('input'); // 设置光标位置 function setCursorPosition(pos) { const range = document.createRange(); const selection = window.getSelection(); range.setStart(input, pos); range.collapse(true); selection.removeAllRanges(); selection.addRange(range); } // 获取光标位置 function getCursorPosition() { const selection = window.getSelection(); const range = selection.getRangeAt(0); const preSelectionRange = range.cloneRange(); preSelectionRange.selectNodeContents(input); preSelectionRange.setEnd(range.startContainer, range.startOffset); return preSelectionRange.toString().length; } // 示例 input.addEventListener('click', () => { // 设置光标位置到末尾 setCursorPosition(input.value.length); }); ``` 以上代码实现了点击 input 元素时将光标位置设置到末尾。你可以根据需要调整代码实现你想要的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值