解决 input 添加 readonly 后，ios 仍然出现光标问题

最新推荐文章于 2022-07-01 15:38:51 发布

原创最新推荐文章于 2022-07-01 15:38:51 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#input禁止输入 #ios上input光标 #input 只读

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种解决iOS设备上input元素设置为readonly后仍可输入的问题，通过添加unselectable=on和onfocus=this.blur()属性，可以有效阻止用户编辑。

当 input 设置为 readonly 后，ios上仍然是可输入文字的，为防止光标存在，我们还需要添加两个属性：

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

catchRun

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

苹果安卓兼容性问题

sinat_15110721的博客

05-24

1070

1.数字键盘没有小数点：<input type="tel" pattern="[0-9]*” > 带小数点：<input type="number" pattern="[0-9]*” > 2.overflow:scroll在ios卡顿在滚动的容器上增加：-webkit-overflow-scrolling: touch; body { -webkit-overf...

html <input type="text" />加上readonly后在各种浏览器的差异。

weixin_30663471的博客

12-05

146

<html> <body> <p>Name:<input type="text" name="email" /></p> <p>Country:<input type="text" name="country" value="China" readonly="readonly" />&...

参与评论您还未登录，请先登录后发表或查看评论

ios手机设置input为readonly后，解决仍会获得焦点弹起软键盘

qq_44947814的博客

04-23

955

ios手机设置input为readonly后，解决仍会获得焦点弹起软键盘

input仅仅输入数字，避免弹出软键盘。使用readonly

weixin_30887919的博客

09-07

221

1.布局 //html <input id="timeInput" class="timeInput" placeholder="设置秒数" size="7" maxlength="10" onkeyup="this.value=this.value.replace(/\D/g,'')"/> 1.样式 //CSS .process-text inpu...

input 老是自动填充怎么取消，

Aurora_juan的博客

07-01

786

input出现自动填充怎么解决

ios input 添加 readonly unselectable="on" 属性，光标依旧还在，怎么清除光标

kakaxiD的博客

12-15

3897

ios中点击input依旧有光标安卓机正常这样ios也正常了

input标签属性为readonly，无法直接输入，怎么解决

最新发布

12-06

我们正在解决一个具体问题：如何解决input标签设置readonly属性后无法直接输入的问题？根据引用[1]，在iOS设备上，即使通过JavaScript移除了readonly属性，输入框仍然可能无法输入。我们需要解决这个问题。引用...

让readonly无法聚焦

09-12

另外，引用[5]提到了在iPhone手机上，readonly元素仍然获取焦点的问题，他们的解决方案是使用内联事件`onfocus="this.blur();"`，这样当元素即将聚焦时立即失去焦点。但是请注意，引用[2]和[4]解释了readonly和...

一款单位使用的工作通讯软件，在输入框输入内容时，光标突然跳转到输入内容的开头，且左右键无法调整光标位置，这是什么原因，怎么解决？

07-29

- 回答结构清晰，帮助用户逐步解决问题。 - 参考提供的引用内容，但用户需求是解决光标问题。用户提供的引用： - 引用[1]：讨论 contenteditable 删除非法字符导致光标跳到开头的问题，涉及过早更新 textContent ...

input type为textarea 为什么文本域禁用后不显示内容

08-21

在前端开发中，`textarea` 元素设置为 `disabled` 状态时，内容不显示是一个较为常见的问题。该问题通常与浏览器默认样式、表单元素状态的渲染机制以及部分框架（如 ElementUI、微信小程序等）的实现方式有关。 ###...

linux下vim对于意外退出的文档的再次开启

ljp1919的专栏

09-11

7182

1、对于同一个文件如果上次已经打开，而未关闭的情况下，又打开该文件进行编辑时，会出现如下提醒：这是由于已经打开但未闭关的文件，会在其目录下出现一个.swp的文件，由于是属于隐藏文件，可以用命令l. 对其进行查看。需要将该swp文件进行删除，才不会再出现1中那些提醒。 2、删除的语句 rm -rf .trans.sh.swp 由于是隐藏的文件，不能够使用rm -rf

IE8下input框设置成readonly后仍然有光标

chris__XU的博客

08-21

4802

解决办法： unselectable="on"

Form表单input框设置可编辑与失效（readonly）

qq_39024372的博客

10-12

8356

1.form框 input type="text" name="phone" id="phone" value="" readonly/> a href="javascript:;" onclick="jump()" id="chgph">更换手机号码a> 2.jquery代码 script type="text/javasc

input设置readonly时光标仍然可见

这个昵称没有被占用吧的博客

05-22

2775

在html中，给input设置readonly后，再点击该元素，在火狐浏览器下(谷歌不会，其他未测试)仍然会出现输入时的光标，发现给input增加unselectable=’on’后光标仍然存在，最后通过给input添加onfocus事件解决： &amp;amp;lt;input type=&amp;quot;text&amp;quot; onfocus=&amp;quot;this.blur()&amp;quot; re

html的标签中unselectable=on属性的作用

热门推荐

jsbuzhidao的专栏

11-01

1万+

在HTML中，如果把一个的readonly属性设置为"readonly"，表示这个表单元素不能编辑。但是，鼠标点击之后，这个表单元素还是有光标存在的。此时点击回退键，会引起页面回退。可以加上UNSELECTABLE='true'属性，取消光标的出现。

input 在IOS设置 readonly，光标依然停留

Stavin Li的博客

11-16

639

解决办法： input 增加以下属性 onfocus="this.blur();

input输入框禁止输入但可以选择

m0_57712926的博客

08-23

3763

目录前言一、需求二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、需求示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤 1.引入库代码如下（示例）： import numpy as np import pandas as pd impor

input标签中设置readonly属性后光标显示问题

ken_ding的博客

10-30

3962

IE、火狐浏览器中，在HTML中,如果把一个的readonly属性设置为"readonly",表示这个表单元素不能编辑。但是,鼠标点击之后,这个表单元素还是有光标存在的。以下方法可以解决这个问题： 1.设置属性 disabled=“disabled”， <input type="text" id="id" style="width:250px;height:30px;" disabled=...