怎么解决输入框失去焦点以后光标跑到输入框外面去的问题

最新推荐文章于 2024-01-04 15:47:24 发布
最新推荐文章于 2024-01-04 15:47:24 发布
阅读量438 收藏
点赞数
文章标签： javascript 前端 html5 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42594427/article/details/129551790
版权

在 HTML 中，可以通过在输入框失去焦点后设置光标的位置来解决这个问题。可以使用 JavaScript 来控制光标的位置。具体实现方式如下:

  1. 在输入框的 "onblur" 事件中，获取输入框的 DOM 元素。

  2. 使用 DOM 元素的 "setSelectionRange" 方法来设置光标的位置。

例如:

<inputtype="text" id="myInput" onblur="setCursorPosition()">
不卡不卡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
input的聚焦后的边框问题
qq_18390335的博客
03-12 1641
我们写的input 聚焦后，它的聚焦边框是由outline控制了，但input还可以控制边框 // 输入文字搜索 .my_InputText{ border:0.5px solid #DCDFE6; border-radius: 5px; } .my_InputText:focus { box-sizing: border-box; outline:0px ; border:1px solid rgb(0, 195, 255); } 第一
JS使用正则表达式判断输入框失去焦点事件
10-16
在本例中，我们关注的是如何利用正则表达式和JavaScript事件处理来验证用户在输入框中输入的数据，特别是在输入框失去焦点（`onfocusout`事件）时进行验证。以下是关于这个话题的详细讨论： 1. **失去焦点事件**： ...
input blur失焦事件不好使 | input获取焦点 光标移动到最后
qq_36999656的博客
03-03 4203
input blur失焦事件不好使 | input获取焦点 光标移动到最后
文本框光标离开事件：onBlur
热门推荐
Chao Yu - Smile in the Sunshine
07-17 1万+
在输入完成qq号码、微信号码、email、手机号的时候，就去校验，利用文本框的 光标离开事件：onBlur ，在这个事件里写校验重复的程序，把并加入本联系人的id，如果重复，在文本框下面，或者后面用红色字体提示 重复等 信息。 而且不阻止用户的保存联系人信息。//首先用正则表达式判断是否合法，然后，通过Ajax，调用对应的//url，即对应的action的方法，实现数据的前后台的异步交互。根据//
＜van-field 失去焦点后，就自动清空输入框了，大bug
yuan_618859的博客
12-04 7212
vant的van-field输入框自动清空bug
input获得焦点和失去焦点
aihuobing7181的博客
12-12 437
总结：placeholder因为在IE7 8 9 浏览器不支持所以没用它效果：当input获取光标的时候如果是默认提示则input内容为空。如果不是则为输入内容 当失去光标的时候，如果input内容为空，则恢复默认提示，如果不是则为输入内容 jquery中获取input的值用val() 设置使用$('input').val('内容')而不是$(...
解决ios手机中input输入框光标过长的问题
08-27
"解决ios手机中input输入框光标过长的问题" 在移动端页面开发中，input输入框的光标大小问题是一个常见的问题，特别是在iOS手机中，光标大小与安卓手机不一致的问题。今天，我们将讨论如何解决ios手机中input输入框...
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
10-16
主要介绍了jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能,涉及jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
js控制输入框获得和失去焦点时状态显示的方法
10-24
主要介绍了js控制输入框获得和失去焦点时状态显示的方法,可实现判断输入框的焦点状态设置不同样式的功能,是非常实用的技巧,需要的朋友可以参考下
input输入框focus获得焦点边缘发亮
weixin_33895657的博客
11-28 443
从某个插件上摘下来的代码   &lt;html&gt; &lt;head&gt; &lt;title&gt; New Document &lt;/title&gt; &lt;style&gt; textarea:focus,input[type="text"]:focus,input[type="datetime"]:focus{border-color:rgba(82,
移动端-input怎么清除光标
小白
11-20 7554
问题： 1、ios浏览器和ie9已下（包括ie9）浏览器都有input设置readonly之后input还有聚焦的问题。 2、ios input 添加 readonly unselectable=”on” 属性，光标依旧还在 解决的方法有两种 1、设置input的disabled属性——会使input的事件失效。 2、input聚焦时马上让它失焦，代码： $('input[read...
ios中 input[readonly] 仍然可聚焦出现光标并弹出“完成”面板问题
https://syra-ti.icu
02-05 2023
除readonly外 还需要添加 unselectable=&quot;on&quot; onfocus=&quot;this.blur()&quot;
关于输入框得到焦点时文本框清空,失去焦点时又显示默认文字，值发生改变时不再恢复默认文字的两种方法
wyz1978154331的专栏
08-19 5708
第一种方法： 第二种方法：                             文本框点击时文字消失，失去焦点时文字出现                                                         function addListener(element,e,fn)    {       if(element.addE
Tab键控制光标在指定范围内移动
chen510103032的博客
06-26 3510
关于javascript实现Tab键控制光标在指定范围内移动 问题的提出：在IE浏览器中，模态框显示出来后，父画面的操作停止，画面能够操作的部分仅仅是在模态框内部，Tab键移动光标位置也是如此。但是在Chrome与Firefox中，模态框是用一些插件来实现的，例如jQuery EasyUI的Dialog等。实现了模态框的表示，但是与IE的模态框相比稍显不足，仍然可以Tab键操作父页面，达不到跟IE
vant 输入框ios设备失焦自动滚动到顶部
最新发布
qq_37120809的博客
01-04 742
好用的办法：1.在移动端用el-dialog设置lock-scroll，里面再嵌套需要的vant组件，失焦后不会出现上述情况；2.有时间看了一下el-dialog的相关样式，尝试了一下在外层body（我在自己项目中用的是#app）设置overflow:hidden;看到一个说vant源码中设置了ios设备滚动事件啥的。最后在项目交付之前用的是在focus事件里获取保存当前元素距离顶部高度，blur里面用定时器200ms后滚动回之前保存的高度，其实用户感受很不好，能明显看到屏幕滚动；说不出来问题的根本原因。
H5获取光标的位置
萌萌程序员的博客
01-25 4588
1： 本实例是通过元素的autofocus属性实现的 主要功能: 是当加载页面完成后 设置光标是否自动锁定元素，即是否使元素自动获取焦点 在元素中，如果将该属性的值设置为TRUE，或直接输入autofocus属性名称，那么对应的元素将自动获取焦点 新的表单属性 1: autocomplete novalidate 2： 新的input属性 autocomplete aut
el-input @focus设置光标位置
王也的博客
04-13 4496
setSelectionRange设置的光标范围是(2, 4)是生效的，但鼠标如果点击了input其他位置会覆盖这个设置，例如点击最后的位置，会使(2, 4)变成了(2, 9)当我从下一个input，按键盘shift+tab反选这个input的时候，就发现选中(2, 4)了。随便写个el-input，设置ref、focus、blur属性和方法。获取焦点时设置光标范围(2, 4)
h5手机端在输入框失去焦点后页面没有滑动到原来位置。
sdfujichao的博客
12-17 3081
在手机端经常会写输入框提交信息，有的输入框位置比较靠底部，所以点击输入框的时候浏览器会自动把页面网上滑动，但是输入完成后，也就是这个输入框失去焦点的时候页面并没有滑下来。 解决办法 1：可以用浏览器提供的这个方法来实现scrollIntoView 这个方法可以绑定给任意元素，让他们滑动，具体使用方法查看旭哥的这篇文章吧，就算我费劲写一顿也不如旭哥写的更有深度。CSS scroll-behavi...
el-input输入一个字符，失去焦点光标问题
qq_45838276的博客
03-10 1579
注意：检查所绑定的key值是否与el-input中的v-model所绑定的值是同一个值，或者检查key是否是动态发生了改变。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值