ios中 input[readonly] 仍然可聚焦出现光标并弹出“完成”面板问题

最新推荐文章于 2025-07-26 11:04:40 发布
转载 最新推荐文章于 2025-07-26 11:04:40 发布 · 2k 阅读 · 1

本文介绍了一种通过添加特定属性实现元素禁选及阻止聚焦的方法，利用 unselectable 和 onfocus 属性可以有效防止用户误操作，适用于需要保护界面内容不被改动的场景。

除readonly外 还需要添加

unselectable="on" onfocus="this.blur()"

如果我的文章有帮上什么忙并且您也愿意赏个脸 就扫码领个红包吧(～￣▽￣)～

在这里插入图片描述

ios 中文输入法 完成事件_compositionEnd 和 input 事件（中文输入法问题）
weixin_42499899的博客
02-01 1288
网上用compositionstart +compositionend +input 解决中文输入法问题的办法node.addEventListener('compositionstart', function(){cpLock = true;})node.addEventListener('compositionend', function(){cpLock = false;})node....
处理移动端iframe中input框的一些总结
kitt15的博客
11-03 878
最近项目中的移动端使用iframe作为字容器，在处理input遇到一下一些问题。 1、点击input时，input不会自动显示在键盘上方。 解决方法：当focus将输入框呈现在可视位置。 $("iframe").contents().on('focus',"input[type=\"text\"],textarea", function(){ var target = this; ...
input 禁止出现键盘 （ios完成）
weixin_30951389的博客
09-11 790
<input id="demo2" type="text" readonly="readonly" name="input_date" onfocus='this.blur();' placeholder="日期和时间选择特效" /> 转载于:https://www.cnblogs.com/nns4/p/7503401.html
input 在IOS设置 readonly，光标依然停留
Stavin Li的博客
11-16 529
解决办法： input 增加以下属性 onfocus="this.blur();
谈谈你对input元素中readonly和disabled属性的理解
likuoelie的博客
07-26 1053
readonly 属性该属性使input字段变为只读状态，用户无法通过直接输入修改其值。字段仍然可以接收焦点（例如通过 Tab 键导航），并且在表单提交时，其值会被包含在表单数据中。适用于需要显示但不允许用户编辑的数据，例如预填充的用户名、动态计算的结果（如购物车总价）。disabled 属性该属性完全禁用input字段，用户无法编辑、选择或与之交互。禁用字段无法接收焦点，且在表单提交时，其值不会被发送到服务器。
ios input 添加 readonly 属性，光标依旧还在的解决办法
weixin_30765319的博客
12-08 201
　　最近在做一个h5混合开发的项目，用了一个日历插件，给input设置了readyonly属性，安卓可以了，但是ios依然不可以，于是想了个解决办法，在input聚焦时马上让它失去焦点,这样可以规避光标显示了，代码如下 　　<input type="text" readonly unselectable="on" onfocus="this.blur()" value="点我啊"/>...
ios input为readonly后，点击input会弹起软键盘
namemui的博客
07-25 2669
&lt;input type="number" readonly="readonly" unselectable="on" onfocus="this.blur()" id="number" name="number" placeholder="人数"/&gt; 在input中添加unselectable="on" onfocus
让readonly无法聚焦
最新发布
09-12
根据引用[1]和[3]，在IE浏览器中，即使设置了readonly属性，输入框仍然可以聚焦（光标可点击进入），这可能会导致用户误操作（比如按退格键触发浏览器返回）。 解决方案是给input元素添加`unselectable='on'`属性...
h5输入框获取焦点并阻止键盘弹出
03-25
另一种方式是在输入框中插入一个不可见字符作为占位符，从而避免软键盘自动弹出。这种方式适用于部分 Android 浏览器环境。 ```javascript const inputElement = document.getElementById('inputField'); input...
移动端H5页面关于软键盘的一些踩坑记录
this_ITBoy的博客
08-27 4830
最近一个项目需要做一个留言的功能，需求很简单，点击留言按钮底部弹出留言框，然后发送留言给后台就行了，还有一个就是页面要实现复制功能。讨论需求的时候我预想到了手机上软键盘的弹出可能会有一些bug，不过需求比较急，就想着先做完再来改呗。很快做完之后，在电脑上测了没毛病，提测之后，bug刷刷的就来了： 1、手机ios或者Android微信，点击留言弹出输入框，点击完成或者收起按钮，或者安卓手机点击自带...
elementplus日期选择器组件在移动端点击会自动弹出键盘怎么解决
04-10
综上所述，最可能的解决方案是通过设置readonly属性，并结合必要的事件处理来确保日期选择面板的正常弹出，从而避免移动端键盘的自动弹出。</think>### ElementPlus日期选择器移动端弹出键盘解决方案 #### 问题分析...
怎么解决输入框失去焦点以后光标跑到输入框外面去的问题
weixin_42594427的博客
01-11 595
在 HTML 中，可以通过在输入框失去焦点后设置光标的位置来解决这个问题。可以使用 JavaScript 来控制光标的位置。具体实现方式如下: 在输入框的 "onblur" 事件中，获取输入框的 DOM 元素。 使用 DOM 元素的 "setSelectionRange" 方法来设置光标的位置。 例如: <inputtype="text" id="myInput" onblur="s...
ios input添加readonly属性，光标还在的解决方法
yayayayaya123456的博客
11-19 496
最近在做一个h5混合开发的项目，用了一个日历插件，给input设置了readyonly属性，安卓可以了，但是ios依然不可以，于是想了个解决办法，在input聚焦时马上让它失去焦点,这样可以规避光标显示了，代码如下 &amp;lt;input type=&quot;text&quot; readonly unselectable=&quot;on&quot; onfocus=&quot;this.blur()&quot; value=&quo
移动端-input怎么清除光标
小白
11-20 7669
问题： 1、ios浏览器和ie9已下（包括ie9）浏览器都有input设置readonly之后input还有聚焦的问题。 2、ios input 添加 readonly unselectable=”on” 属性，光标依旧还在 解决的方法有两种 1、设置input的disabled属性——会使input的事件失效。 2、input聚焦时马上让它失焦，代码： $('input[read...
ios中设置readonly还会有光标？
mrhaoxiaojun的博客
05-15 883
在input上添加 unselectable=”on” onfocus=”this.blur()” 即可
js实现复制粘贴(兼容IOS 9.3)以上版本
填了个大空℃
09-16 406
/* HTML */ <!-- 复制按钮 --> <div class="copyBtn" onclick="copyContent('adas1165465165');">复制淘口令</div> <input id="copy_content" type="text" value="" style="position: fixed;top: -100px;z-index: -10;" /> /*js*/ // 点击复制 function copyCon
input标签中设置readonly属性后光标显示问题
ken_ding的博客
10-30 3923
IE、火狐浏览器中，在HTML中,如果把一个的readonly属性设置为"readonly",表示这个表单元素不能编辑。但是,鼠标点击之后,这个表单元素还是有光标存在的。 以下方法可以解决这个问题： 1.设置属性 disabled=“disabled”， &lt;input type="text" id="id" style="width:250px;height:30px;" disabled=...
ios input 添加 readonly unselectable="on" 属性，光标依旧还在，怎么清除光标
kakaxiD的博客
12-15 3880
ios中 点击input依旧有光标 安卓 机正常 这样ios也正常了
iOS WKWebView时 input 设置 readonly 光标仍显示问题处理
tianyitianyi1的专栏
10-16 2451
或  全局设置input 不可得到焦点
实现点击input弹出可选择未来日期的日历插件
使用JavaScript实现点击`input`弹出日历的功能，通常有几种方法：使用原生JavaScript编写，或者利用现有的库如jQuery插件、FullCalendar等。考虑到可操作性和通用性，下面将介绍原生JavaScript实现方法和jQuery插件...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值