input输入框修改后自动跳到最后一个字符

最新推荐文章于 2024-08-11 02:49:42 发布
最新推荐文章于 2024-08-11 02:49:42 发布
阅读量3.2k 收藏 3
点赞数
分类专栏： 前端 文章标签： html javascript
原文链接：https://www.mk2048.com/blog/blog.php?id=hbjahbhj1kib&title=input%E8%BE%93%E5%85%A5%E6%A1%86%E4%BF%AE%E6%94%B9%E5%90%8E%E8%87%AA%E5%8A%A8%E8%B7%B3%E5%88%B0%E6%9C%80%E5%90%8E%E4%B8%80%E4%B8%AA%E5%AD%97%E7%AC%A6
版权 
<input class="m-form-control" onpaste="return false" placeholder="直播间名称" name="name" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5|\u0000-\u00ff|\u3002|\uFF1F|\uFF01|\uff0c|\u3001|\uff1b|\uff1a|\u3008-\u300f|\u2018|\u2019|\u201c|\u201d|\uff08|\uff09|\u2014|\u2026|\u2013|\uff0e]/g,'')" onafterpaste="this.value=this.value.replace(/[^\u4e00-\u9fa5|\u0000-\u00ff|\u3002|\uFF1F|\uFF01|\uff0c|\u3001|\uff1b|\uff1a|\u3008-\u300f|\u2018|\u2019|\u201c|\u201d|\uff08|\uff09|\u2014|\u2026|\u2013|\uff0e]/g,'')">

有三个事件，一个onpaste用来禁止粘贴，剩下两个用来去掉特殊的字符，原因出在replace,replace替换后会像重新输入一样，所以光标会在最后

解决，把replace事件在失去光标的时候触发

会做饭的技术男
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
input光标总是在内容最末端
Justicky
01-08 6538
前端在优化用户体验的时候，经常会遇到这样的需求： 当input框有值的时候，用户再去编辑这个input，无论用户点input的什么位置，总是将光标置于input已有内容的最末端。 下例是基于vue框架的写法： &lt;input type="text" @click="focusEnd('name-inp-hook')" class="name-inp" id="name-inp-hook...
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
10-14
3. 在`verifyInput`函数中，首先定义一个正则表达式`punctuation`，该表达式包含了需要过滤的特殊字符，包括了英文的特殊字符和中文的特殊字符。 4. 通过`split('')`方法将输入值分割成数组，然后利用数组的`map`...
antd Menu + Modal + Textarea导致光标不可被键盘控制问题
wuxian_wj的博客
04-22 1022
说一下问题出现的需求场景，需要点击出现一个下拉框，不同的下拉框对应不同的Modal组件，包括显示账号信息，禁用/启用账号并填写原因等需求。就是用的Dropdown组件+Modal+Input.Textarea组件来做，做完以后发现出了一点bug。文本域中点击上下左右键，光标不随着移动。 经过排查，发现Dropdown内如果点击选中MenuItem后，不使其回缩，会发现，在文本域中输入文字后，如果点击上下键，光标不动，但是MenuItem的选中会跟着键盘事件移动。这说明MenuItem或者Menu对键盘事件也
H5移动端开发输入框光标总会跳到末尾问题
weixin_43756315的博客
07-17 2171
程序猿的疑惑 有这样一个简单的需求：用户充值话费，在输入框里输入手机号。 但是就是这样一个简单的需求确有一个烦人的bug，当点击手机号中间任意位置执行删除时光标会自动跳转到末尾位置，用户体验极差。 光标位置的控制 解决这个问题需要用到光标位置的控制HTMLInputElement.setSelectionRange() 使用方法： element.setSelectionRange(selectionStart, selectionEnd [, selectionDirection]); selectio
Input输入框光标在前输入后自动跳到最后面的bug
weixin_48092226的博客
07-13 2962
组件库：tea-component技术框架：umi、react、react-hook-form今日bug，输入框光标在最前面输入后自动跳到了最后面 输入前 输入后触发事件不同，其余条件完全相同情况下 此bug发生的原因猜测，tea-component组件对onChange组件进行了一次封装 ，而没有对onInput封装导致具体原因欢迎大家指点解决方法：将onChange事件改成onInput...
input使用replce禁止输入，在字符串中间添加字符光标会跳转到字符串最后解决办法
u013284661的博客
12-23 2380
解决用replace替换时（在字符串中间删除）光标会跳转到Input框最后，但会出现光标跳转到字符串最后再跳转到删除位置（光标闪烁），不知道怎么解决闪烁问题，希望有网友能有好的解决办法。var card={ cardValue : "",//保存银行卡 pos : ""//光标位置 } //银行卡号 $(document).on('input', '.cardList .account',
html input标签使光标移动到文本的最后面
css470895871的专栏
12-27 7008
var content = "input元素";  content.focus();   var len = content.value.length;  if (document.selection) {     var sel = content.createTextRange();     sel.moveStart('character', len);     sel.coll
微信小程序输入框光标从中间删除跳到最后bug解决
weixin_45145119的博客
02-25 2617
原因：双向绑定导致数据发生更新导致光标跑到最后。 1.使用textarea标签， 2.将双向绑定v-model改为:value绑定数据 3.重新定义一个变量，在input事件里面把e.detail.value复制给这个变量 4.在提交的时候把重新定义的变量赋值给:value绑定的变量 5.清空时把这两个变量都清空 ......
vue实现输入框自动跳转功能
10-15
此外，根据输入框的索引更新变量`num1`到`num6`，在所有输入框填满后，组合成一个字符串并调用`setUpSVIP`方法。 4. `setUpSVIP`方法：这个方法可能是一个异步请求，用于将输入的数字串发送到服务器进行处理。成功...
js 将input框中的输入自动转化成半角大写（税号输入框）
10-20
为了处理光标位置问题，在用户输入时，如果光标不在最后一位，输入内容后光标会跳到最后一位，这会极大地影响用户的输入体验。为了改善这一点，需要使用相关的API来获取和设置光标的精确位置。具体而言，可以使用...
js控制input输入字符解析
10-26
1. 防止光标跳到下一个输入框： 通常在表单中使用Tab键可以跳转到下一个输入框，如果要防止这一行为，可以使用onkeydown事件来阻止默认行为。示例代码中通过替换event.keyCode为9（Tab键的键码），从而阻止了光标...
js达到文本框的最大长度时跳到下一个文本框
11-30
当用户在一个文本框内输入字符达到设定的最大长度后，通常希望自动跳转到下一个文本框继续输入。这种功能可以提高用户体验，避免用户手动切换输入焦点，尤其是在填写大量数据的表单时更为实用。 ### 关键技术实现 ...
完美的数字输入框，只能输入两位小数点以千分位分隔，解决iview inputnumber输入光标跳转问题
sophia
12-16 1549
注意UI框架用的是iview <InputNumber :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')" :parser="value => value.replace(/\$\s?|(,*)/g, '')" :active-change="false" :max="99999999.99" :min="1" :precision="2" v-model.number="vehicleForm.mo
VUE项目输入框值改变光标到最后
KingDeeL的博客
03-09 1874
最近遇到一个小需求，输入会议房间号，要求每三位加一空格，发现改变输入框值后，光标总是跑到最后，查完资料发现原因出在replace,replace替换后会像重新输入一样，所以光标会在最后。需要用到‘selectionStart’ 表示输入性元素selection起点的位置，‘selectionEnd’ 表示输入性元素selection末点的位置，都是 DOM 属性。直接贴代码 ...
JAVA程序光标移到后面_input 输入，从中间输入或删除后，光标都会移到最后面...
weixin_39626409的博客
02-23 450
import React, { useState, useCallback, useEffect } from 'react';import { Input } from 'antd';export default function () {const [value, setValue] = useState('test123');const [value1, setValue1] = useSt...
vue antd input type=“number“ 如何禁止输入+-符号以及如何禁止滚轮滚动数字变动事件
suimengfeiyang123的博客
01-19 737
if (keyCode === 189 || keyCode === 109|| keyCode === 107|| keyCode === 69|| keyCode === 187) { // -键对应的keycode为189或者109，+键对应的keycode为107或者187。// 阻止默认事件发生。
编写一个指令（v-focus2end）使输入框文本在聚焦时焦点在文本最后一个位置
Anonymous996的博客
08-10 1781
当编辑输入框时，文本内容较多，使用v-directive 放鼠标焦点方式让其到最后一个字符后面
input光标位置设置至行末端
Shuanger112的博客
08-15 7486
最近接到了一个很尬的需求.. 这个需求是这样的… 再点击input框的时候光标要始终保持在内容的行末端 emm.. 废话少说，直接上代码！ Js： end: function (item) { var obj = document.getElementsByClassName(item)[0] obj.focus(); var len = obj.value.len...
Vue中的高频内置指令：v-text、v-html、v-cloak、v-once、v-pre
最新发布
PleaSure乐事的博客
08-11 945
Vue——v-text、v-html、v-cloak、v-once、v-pre指令
uniapp vue3输入框输入完毕后自动跳到下一个输入框怎么实现
04-18
对于你的问题，我可以提供以下建议：您可以使用v-model指令来监听输入框内容的变化，然后在输入框的input事件中使用$refs属性来获取下一个输入框，并将焦点聚焦到下一个输入框上。具体实现可以参考以下代码： ``` <template> <div> <input v-model="input1" @input="handleInput(1)"> <input ref="input2"> </div> </template> <script> export default { data() { return { input1: '' } }, methods: { handleInput(index) { if (this.input1.length >= 4) { this.$refs['input' + (index + 1)].focus(); } } } } </script> ``` 当输入框一的内容长度达到4个字符时，就会自动跳转到输入框二，你可以根据实际情况修改这个阈值。希望这能对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值