• 推荐
  • 评论
  • 收藏

HTML input 标签加上disabled属性后,如何添加点击事件?

2021-04-04    2954次浏览

起因与来源

我们在前端页面的开发中,经常会使用到表单标签进行数据的采集,但有时候,我们可能针对某些表单项,禁止用户的输入,这个时候我们首先想到的是给这个 input标签 添加 disabled 属性,这个属性可以让 input标签 失去输入的焦点,并且禁止用户输入任何数据,但是这个时候我们会发现,一旦给input 标签 加上了 disabled属性后,那么给它的点击事件就会失效,所以 如何给 加上disabled属性后的 input标签 添加点击事件呢?

搜索与查找

结合出现的问题,进行各种查找与搜索,发现在input标签 的属性中竟然有一个更好的属性可以实现 disabled属性 的功能,并且还能不阻塞点击事件!有这么好的属性?那就是 readonly属性 这个属性规定 input标签 为只读状态,用户不能进行修改。 

解决方案

  • 使用 readonly属性 来替换 disabled属性
  • 使用其父类标签的点击事件:给input标签添加父类标签,可以是label,也可以是其它的标签,然后把事件写在直接父类标签上,(并把disabled元素样式设置成“pointer-events:none”,这个样式是让元素忽略鼠标事件,让点击直接穿透到下一层元素去,也可以不加这个样式也可以实现)然后就触发到其父类标签label上的点击事件了:<label onclick="alert('holle world')"><input type="checkbox" disabled style="pointer-events:none"></label>

扩展知识

input标签 readonly属性说明

  • 只读字段是不能修改的。不过,用户仍然可以使用 tab 键切换到该字段,还可以选中或拷贝其文本
  • readonly 属性可以防止用户对 input标签中的值 进行修改。可以设定为满足某种条件(比如选中了一个复选框)后,使用 js 来动态消除 readonly 值,将输入字段切换到可编辑状态

input标签 disabled属性说明

  • 被禁用的 input标签 既不可用,也不可进行点击。可以设定为满足某种条件(比如选中了一个复选框)后,通过使用 js 来动态删除 disabled 属性,将 input标签 的值切换为可用
  • disabled 属性无法与 <input type="hidden"> 一起使用