×

IOS中的bug:点击input的时候,无法定位输入信息

作者:Web前端之家2022.08.04来源:Web前端之家浏览:558评论:0
关键词:user-select
微信公众号

微信公众号

500.jpg

今天我们分享一个IOS的bug,问题原因:在form表单输入框input里输入的时候,没反应,输入文字也没显示,的确很奇葩。当然在安卓里面是没问题的。我们先来看张图,这张图是在项目中的截图,如下:

image.png

分析原因

大家可以看到,这是一个很简单的表单,也没用什么插件,简单了写了些判断而已。

项目做完后,在PC端是没问题的,并且用PC浏览器模拟移动端的检测也是可以了。

但是就IOS真机测试问题就来了,导致了上图的问题,只有最后一个输入框能输入。

在一顿操作后,发现是输入框属性出现了问题,我们在CSS中设置通用样式的时候,设置了:

a,button,input {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  /* -webkit-user-select: none; */
  outline: 0;
}

-webkit-user-select: none 这个属性。大家可能对于user-select不太熟悉,小编先简单介绍下。

user-select介绍

user-select 属性规定是否能选取元素的文本。

在 web 浏览器中,如果您在文本上双击,文本会被选取或高亮显示。此属性用于阻止这种行为。

默认值:auto
继承:
动画制作:不支持。
版本:CSS3
JavaScript 语法:object.style.userSelect="none"

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

跟随 -webkit-、-ms- 或 -moz- 的数字规定使用前缀的首个版本。

属性ChromeIEFirefoxSafariOpera
user-select 54.0
6.0 -webkit-
79.0
10.0 -ms-
69.0
2.0 -moz-
3.1 -webkit- 41.0
15.0 -webkit-

CSS 语法

user-select: auto|none|text|all;

属性值

描述
auto默认。如果浏览器允许,则可以选择文本。
none防止文本选取。
text文本可被用户选取。
all单击选取文本,而不是双击。

实例

防止选取 <div> 元素的文本:

div {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
}

解决方案

从上面的知识点,我们可以看出user-select是防止选取的用途,但是在IOS里面,就出现问题;当你设置为none的时候,就会造成我们刚开始说的问题。所以我们应该改下设置了,如下:

a,button,input {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  /* -webkit-user-select: none; */
  outline: 0;
}

注释掉-webkit-user-select: none,或者你可以改成-webkit-user-select: auto,都可以。

那有童鞋问了,为什么最后一个你没改之前,又可以输入?哈哈,因为最后一个是textarea标签,我们没设置通用的user-select属性,所以不会被禁止输入哦!

总结

在项目开发过程中,往往一个很小的问题,会让你折腾半天或者更长时间,所以我们需要多看、多读,多积累这些基础知识点,才能在后面开发项目的时候,少碰壁。

希望本次分享能够帮助到大家,如果有问题,可以留言沟通。

您的支持是我们创作的动力!
温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/user-select20220804.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    sddddddddddddddVS的vVSVS但是v方法v方法v发v方法v发v发v方不方便德文法文...

  • 没人发言

    鸡肋的功能...

  • 23b

    这个你应该加群找群主才对吧...

  • 访客

    大佬,能提供能一下提取图片中的文字工具的源码吗,感谢...

  • qdxx

    SEO原创还可以的,新手学习下。...

  • Web前端之家

    已处理!...

  • 程序员路灯

    贵站友链已添加名称:程序员路灯地址:http://www.eqishare.com...

  • Web前端之家

    可以加群讨论...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2022 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2