表单中readonly的input等标签，禁止光标进入（focus）的几种方式

Lowky 发布于2019-08-30 15:53 / 3543人阅读

摘要：需求及问题描述在做移动端页面，需要在订单页面中显示表单数据，由于统一，所以就依旧采用的结构来写结构，只读数据的标签自然要加，以为这样就行了。测试中模拟移动端是看不出问题的。除此之外都表现完美，就我目前需求来看，也不需要什么事件。

需求及问题描述

在做移动端页面，需要在订单页面中显示表单数据，由于UI统一，所以就依旧采用form的结构来写结构，只读数据的标签自然要加readonly=”readonly”，以为这样就行了。
测试中Chrome模拟移动端是看不出问题的。然而iOS手机上一看，虽然表单元素不能编辑内容，但是会出现闪动的光标以及页面底部有一条系统自带的控制bar（安卓的没有测试，我猜想也有问题吧？）。如下图：

这种情况对我来说并不好。于是网上找了一些解决方案，现在总结如下：

方案一（JS）：

这个很好理解就是进入的时候自动跳出。但是缺点是一方面js处理没有css好，二是如果需要在该元素上绑定其他事件，其他人开发不留意可能会造成事件覆盖。

方案二（CSS）：

[readonly="readonly"] {
  user-select: none;
}

这是个新的实验性属性，具体说明及兼容性可参考user-select MDN
用起来感觉很好，但是同样有两个问题：一，非标准属性（请尽量不要在生产环境中使用它！）；二，如果用户想要复制该表单内容就不行了，这个问题个人感觉很严重！

方案三（CSS）：

[readonly="readonly"] {
  pointer-events: none;
}

这个是我感觉比较适合我的，因此最后我采纳了该方案，当然也是有弊端的，绑定在只读表单元素的所有事件将无法生效。除此之外都表现完美，就我目前需求来看，也不需要什么事件。因此采用了~

当然，如果你也遇到相似的问题，可以根据情况选择对应的方案，当然，如果你也有更好的方法也欢迎留言~

GPU云服务器云服务器 js继承的几种方式服务器请求的几种方式 java创建对象的几种方式最基本的几种

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116643.html

你不知道的CSS（三）

摘要：本文首发于我的博客在前面两篇文章你不知道的一和你不知道的二中大致介绍了一些方面比较隐晦的但又很实用的技巧。系列文章你不知道的一你不知道的二本文首发于我的博客本文首发于我的博客在前面两篇文章《你不知道的CSS（一）》和《你不知道的CSS（二）》中大致介绍了一些CSS方面比较隐晦的但又很实用的技巧。相信这些技巧会为大家在项目实践中带来一定的帮助，本文作为《你不知道的CSS》系列的第三篇...

xiangzhihong 2019-08-29 13:28 评论0 收藏0
原生JS实现粘贴到剪贴板

摘要：综上加两行如果不是等表单元素，不能使用和的话，那么我们可以使用和方法来模拟这个过程了，对象表示用户选择的文本范围或光标的当前位置，满足执行命令的可编辑活动区域，如下上述针对非，等表单元素也能实现了本文主要讨论原生方法目前常见的实现粘贴到剪贴板主要有以下两种方法：第三方库 clipboard 原生JS, 主要是 document.execCommand方法第一种方法按照文档...

Pikachu 2019-08-22 15:06 评论0 收藏0
css选择器总结

摘要：伪类选择器之动态伪类序号选择器名称说明版本动态伪类选择器未被访问时动态伪类选择器已被访问时动态伪类选择器鼠标以上时动态伪类选择器访问中跳转页面时动态伪类选择器获得焦点时是有顺序的，其他顺序可能无效，这是个坑。 1. 基本选择器序号选择器名称说明 css版本 1 * 通用选择器选择所有元素，包括html和body 2 2 div,span 标签选择器根据标签选择...

DirtyMind 2019-08-30 15:52 评论0 收藏0
构建一个自定义 angular2 输入组件

摘要：构建一个自定义输入组件今天我们来学习如何正确的构建和一个具有和同样作用，但同时也具有自己的逻辑的输入组件。值访问器在完成上面的一些步骤之后，我们的组件基本功能完成了，但是接下来还有最重要的一部分内容，那就是让我们的自定义组件获得值访问权限。构建一个自定义 angular2 输入组件今天我们来学习如何正确的构建和一个具有和同样作用，但同时也具有自己的逻辑的输入组件。在读这篇文章...

CNZPH 2019-08-02 15:56 评论0 收藏0
构建一个自定义 angular2 输入组件

摘要：构建一个自定义输入组件今天我们来学习如何正确的构建和一个具有和同样作用，但同时也具有自己的逻辑的输入组件。值访问器在完成上面的一些步骤之后，我们的组件基本功能完成了，但是接下来还有最重要的一部分内容，那就是让我们的自定义组件获得值访问权限。构建一个自定义 angular2 输入组件今天我们来学习如何正确的构建和一个具有和同样作用，但同时也具有自己的逻辑的输入组件。在读这篇文章...

pekonchan 2019-08-20 12:32 评论0 收藏0