ios下点击label包含的input checkbox或radio无效问题

问题描述：
页面中有多个根据接口返回数据，动态生成的checkbox和radio选项，input元素外有一个label标签包裹着，label标签内有文字，即如下示例所示：

<label><input type="checkbox" name="checkbox" value="checkbox"><span>多选框</span></label>

在页面中和安卓端点击选项都没有问题，但是在ios上就出现问题，点击无效，多选框和单选框无法选中。
解决方案：
经个人百般尝试和查阅资料，最终了解到，该问题产生的原因并不是因为动态生成checkbox结点或者label结点，而是ios对label 的兼容性造成的。
不要用label包裹input,可以使用label for来关联input,但是这种方式安卓和web端都适用，ios端checkbox可以点击，但是点击文字无效，可以通过对label添加点击事件去关联CheckBox。

ios下点击label包含的input checkbox或radio无效问题相关推荐

web移动端Fixed在Input获取焦点时ios下产生的BUG及处理
1.现象可以看到下面两张图,图1搜索框为fixed固定在顶部,滚动没有任何问题. 图2当光标进入搜索框时,ios自作聪明的把光标定位到中间,并且fixed属性被自动修改成了absolute.此时注意 ...
iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案
iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案参考文章: (1)iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案 (2)https://www.cn ...
iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案—scrollIntoView()
iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案-scrollIntoView() 参考文章: (1)iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案- ...
TensorFlow自带例子已经包含了android和ios下的摄像头图像分类示例Inception v1，这里补充一个Windows下的，使用AForge库(www.aforgenet.com)操作
TensorFlow自带例子已经包含了android和ios下的摄像头图像分类示例Inception v1,这里补充一个Windows下的,使用AForge库(www.aforgenet.com)操作 ...
解决Web移动端Fixed布局的方案（防止页面露底、overflow-scrolling、iOS下的 Fixed + Input BUG现象、isScroll.js）
一些细节处理在细节处理上,其实还有很多要注意的,挑几个实际遇到比较大的问题来说一下: 有时候输入框 focus 以后,会出现软键盘遮挡输入框的情况,这时候可以尝试 input 元素的 scrollI ...
移动端踩坑记---------ios下输入法遮挡input
移动端踩坑记---ios下输入法遮挡input 最近项目中遇到了一个比较严重移动端IOS下的Fixed兼容问题,网上也有很多人躺在这个问题上了,现在开始详细讨论一下这个问题. 现在我们先来看一 ...
iOS下的 Fixed BUG
input 光标位置乱窜固定式浮层内的输入框光标会发生偏移.即 fixed 定位的容器中输入框光标的位置显示不正确,没有正常地显示在输入框中,而是偏移到了输入框外面可触发条件页面body出现滚动 ...
ios下js复制到粘贴板_h5实现一键复制到粘贴板兼容ios
实现原理采用document.execCommand('copy') 来实现复制到粘贴板功能复制必须是选中input框的文字内容,然后执行document.execCommand('copy') ...
ios下fixed回复框bug的解决方案
前几天做一个移动端的页面,要加个像微信那样附着在底部的回复框,按照做PC端网页的思路,首先是用fixed,在安卓上测了一下是好的,结果到同事的iphone6p上就不行了,点击输入框之后它总会跳到屏幕中 ...

ios下点击label包含的input checkbox或radio无效问题

ios下点击label包含的input checkbox或radio无效问题相关推荐

最新文章

热门文章