精华内容
下载资源
问答
  • 禁止点击
    2021-05-10 10:24:55

    在没有disabled属性,不能禁用的情况。我们使用css中提供的方法,添加css属性即可解决。

    禁止
    pointer-events: none;
    
    默认
    pointer-events: auto;
    
    更多相关内容
  • css实现禁止点击的方法

    千次阅读 2022-07-05 11:30:36
    css实现禁止点击的方法

    css实现禁止点击的方法

    1、通过设置“disabled”为input框添加禁用状态;2、通过设置“cursor:not-allowed”为禁用状态添加状态;3、设置“pointer-events:none”即可。

    一:为input框添加禁用状态
    1、readonly表示此域的值不可修改,仅可与 type=“text” 配合使用,可复制,可选择,可以接收焦点,后台能接收到传值.
    代码演示:

    <input type="text" name="firstname" value=""  readonly="readonly" />
    

    2、disabled表示禁用input元素,不可编辑,不可复制,不可选择,不能接收焦点,,后台不能接收到传值.
    代码演示:

    <input type="text" name="firstname" value="" disabled="disabled" />
    

    二:为禁用状态添加状态
    鼠标不可点击主要是两种表现:

    1.鼠标不可点击时的显示状态:cursor: not-allowed

    样式演示:

    <style> 
    
        input[readonly]   //readonly:后台能接收此input框传值
    
        {
    
             background:#dddddd; //为带有readonly的input框添加背景颜色
    
             cursor: not-allowed  // 表示一个红色的圈加一个斜杠
    
        }
    
    </style>
    

    2.鼠标原有的事件不能实现:pointer-events:none

    样式演示:

    <style> 
    
        input[disabled] //disadled:后台不可接收此input传值
    
        {
    
             background:#dddddd; //为带有disabled的input框添加背景颜色
    
             pointer-events:none;//鼠标点击不可修改
    
        }
    
    </style>
    

    拓展

    cursor 定义和用法
    cursor 属性规定要显示的光标的类型(形状)。【推荐学习:《css视频教程》】

    该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围)。

    默认值: auto
    继承性: yes
    版本: CSS2
    JavaScript 语法: object.style.cursor=“crosshair”
    可能的值
    值 描述
    url
    需使用的自定义光标的 URL。

    注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。

    default 默认光标(通常是一个箭头)
    auto 默认。浏览器设置的光标。
    crosshair 光标呈现为十字线。
    pointer 光标呈现为指示链接的指针(一只手)
    move 此光标指示某对象可被移动。
    e-resize 此光标指示矩形框的边缘可被向右(东)移动。
    ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)。
    nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)。
    n-resize 此光标指示矩形框的边缘可被向上(北)移动。
    se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。
    sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。
    s-resize 此光标指示矩形框的边缘可被向下移动(南)。
    w-resize 此光标指示矩形框的边缘可被向左移动(西)。
    text 此光标指示文本。
    wait 此光标指示程序正忙(通常是一只表或沙漏)。
    help 此光标指示可用的帮助(通常是一个问号或一个气球)。

    展开全文
  • layui框架内select禁止点击和恢复点击

    千次阅读 2022-04-07 14:54:35
    layui框架内select禁止点击和恢复点击
    <form class="layui-form"> <!-- 提示:如果你不想用form,你可以换成div等任何一个普通元素 -->
         <div class="layui-row">
             <div class="layui-col-xs6" style="padding: 0 5px">
                  <div class="layui-form-item">
                       <label class="layui-form-label form_label">计划类型<span class="field_required">*</span></label>
                       <div class="layui-input-block form_block">
                           <select name="pType" class="testNull" title="计划类型" lay-verify="required" lay-filter="pType" autocomplete="off"></select>
                       </div>
                   </div>
             </div>
             <div class="layui-col-xs6" style="padding: 0 5px">
                  <div class="layui-form-item">
                       <label class="layui-form-label form_label">周期类型</label>
                       <div class="layui-input-block form_block">
                            <select name="cycleType" lay-verify="required" class="testNull" title="周期类型" autocomplete="off"></select>
                       </div>
                  </div>
            </div>
        </div>
    </form>
    <script src="layui/layui.js"></script>
    <script>
    layui.use('form', function(){
      var layForm= layui.form;
     function initForm(type, data) {
        //周期类型默认不可更改
         $('select[name="cycleType"]').attr('disabled','disabled')
            layForm.render()
        }
    //根据其他下拉内容更改周期下拉框的值和控制是否可下拉
    layForm.on('select(pType)', function (data) {
         var value = data.value;
         if(value == '01'){
             $('select[name="cycleType"]').val('1');
             $('select[name="cycleType"]').attr('disabled','disabled')
             layForm.render('select');
             layForm.render()
         }else{
             $('select[name="cycleType"]').val('2');
             $('select[name="cycleType"]').removeAttr("disabled");
             layForm.render('select');
             layForm.render()
         }
    })
    
    });
    </script>

    也可以直接 放到下拉选择框 select 上 (HTML),这样默认渲染出来的效果就是这样的:

    <select name="cycleType" disabled lay-filter="cycleType">...</select>

    也可以用 jquery写js代码 控制下拉框 select 禁用效果:

    var form = layui.form;
    $('select[name="cycleType"]').attr("disabled","disabled");
    layForm.render('select');

    需要恢复下拉的话

    $('select[name="cycleType"]').removeAttr("disabled");
    layForm.render('select');
    layForm.render()

    注意事项:

    • 依赖加载模块:form
    • 用js或jquery把属性设置为 disabled
    • 最后记得刷新 select 选择框渲染 form.render('select')
    展开全文
  • HTML 的 a标签禁止点击

    千次阅读 2021-05-07 10:03:07
    HTML 的 a标签禁止点击 前言 在HTML中,要实现超链接需要使用标签 <a></a> 这个标签有多个属性,如href属性、target属性等。 在程序开发中,有时候我们需要实现a标签不可点击功能,但是a标签的属性中并...

    HTML 的 a标签禁止点击

    前言

    在HTML中,要实现超链接需要使用标签 <a></a> 这个标签有多个属性,如href属性、target属性等。

    在程序开发中,有时候我们需要实现a标签不可点击功能,但是a标签的属性中并没有disabled 这时,要实现a标签不可点击,需要用到css的知识。

    正文

    主要方法: 给a标签设置css样式属性 pointer-events

    <a href="" style="pointer-events:none;">//none属性值代表元素不对指针事件作出反应
    

    这样设置之后,a标签就为不可点击状态了。

    附上css官网的 pointer-events 属性详解 :

    pointer-events: auto|none;
    (设置元素是否对指针事件做出反应,none代表不做反应,auto默认值代表做出反应)

    浏览器支持:
    在这里插入图片描述

    参考:
    https://blog.csdn.net/weixin_41883384/article/details/80163823
    https://www.w3school.com.cn/cssref/pr_pointer-events.asp

    展开全文
  • layui标签输入框添加禁止点击标志

    千次阅读 2020-12-09 16:55:42
    需求:在某些条件下不允许条件输入,输入元素变灰,并且出现禁止标志 解决: 标签 class上面添加 layui-btn-disabled 再添加disabled即可 ,其他标签也适用 <select name="station" class="layui-select input-...
  • HTML a标签禁止点击

    千次阅读 2020-10-30 17:23:43
    在a标签的样式加上以下属性 <a style="pointer-events: none;"/>
  • html disabled属性 禁止点击属性

    千次阅读 2020-12-26 11:06:04
    当设置了disabled以后,点击事件将不可用 <!DOCTYPE html> <html> <head> <script src='./jquery-3.4.1.min.js'></script> <meta charset="utf-8" /> </head> <...
  • 页面元素禁止点击

    千次阅读 2019-10-21 16:23:33
    只要加入 style="pointer-events: none;" 屡试不爽!
  • button 禁止点击

    千次阅读 2019-06-27 14:31:59
    cursor: not-allowed; 只是改变了鼠标的样式而已,并没有禁止掉他的事件 pointer-events:none; 这一行控制了点击事件是否执行,意思是点击不触发事件, 所以如果想禁止掉按钮事件,两个都需要加上 ...
  • js禁止点击按钮(点击无效)

    万次阅读 2020-03-28 08:54:01
    1.设置按钮不可点击 document.getElementById("bt1").disabled=true; 2.设置按钮可点击 document.getElementById("bt1").disabled=false; 3.jquery中设置按钮可点击与不可点击,默认是可点击的 (1)设置按钮...
  • uni-app禁止点击_5分钟极速入门uniapp

    千次阅读 2020-10-21 22:05:59
    之前已经简单介绍过uni-app的强大跨端能力,So,今天来带大家5分钟快速入门uni-app。 本篇为基础教程,涉及如运行原理、源码解析、APP开发、uniCloud(Serverless)、NVUE,见后续... * 本文原创,未经本人同意,禁止转载
  • 话不多说,贴代码: <view class="my-modal" @touchmove.stop.prevent="preventHandler"> <view>...</view> </view> export default { methods: { preventHandler() { ......
  • H5怎么禁止点击图片跳出图片的问题

    千次阅读 2020-11-27 14:00:09
    这种方式可以解决这个问题,但是当如果你在此时的img上绑定点击事件,点击图片时这个事件将不会被触发。这种情况可以使用一个带点击事件的元素包裹这个img解决。 2 js阻止浏览器默认行为 document.body....
  • 知道点2:为了禁止点击需要用到legendselectchanged这个监听事件,获取当前点击的selected和name,再通过我们封装的方法去控制selected属性 知道点3:关于鼠标的 cursor 属性 ,需要到源码中去修改,echart没有...
  • 小程序禁止点击

    千次阅读 2019-07-17 09:44:00
    pointer-events 禁止用none 开启用auto disabled用起来没那么方便 转载于:https://www.cnblogs.com/wycstudy/p/11199004.html
  • jquery禁止点击事件,css禁止按钮

    千次阅读 2019-03-16 15:16:00
    jquery禁止点击事件,css禁止按钮 $('.disabled').unbind('click'); cursor:not-allowed; 转载于:https://www.cnblogs.com/starwink/p/10542424.html
  • css3禁止点击事件

    千次阅读 2019-02-14 16:53:29
    //css禁止点击事件 .disabled {  pointer-events: none;  cursor: default;  opacity: 0.6;} 其中,pointer-events: none;是css3新出现的属性,意思就是禁止鼠标点击事件,当元素中有这一属性时,链接、点击...
  • vue中div如何禁止点击事件

    万次阅读 多人点赞 2020-03-11 11:19:24
    在props里面定义一个判断是不是只读的属性。 在最外面的div里面添加三元表达式 pointer-events: none;是禁止鼠标点击事件
  • css禁止点击事件

    千次阅读 2019-02-21 11:23:00
    .no-click{ pointer-events:none;} 转载于:https://www.cnblogs.com/qijiamin/p/10411305.html
  • html div 禁止点击

    万次阅读 2018-07-16 19:34:22
    有的时候会遇到不允许用户点击某个选项的功能,比如日历控件中,周一至周五为上班时间,用户不能在周六周日预约到店消费,所以要设置不允许用户点击周六周日这两列的日期 ...转自 html div禁止点击...
  • Android中关于SeekBar禁止点击的处理

    千次阅读 2018-09-19 17:09:34
    最近公司关于滑动验证码的需求,SeekBar滑动与验证码滑块联动,SeekBar在点击时候图标也会作一段距离的移动,这在很多时候是对应不上需求的,在网上查了一些资料发现都不是很好控制,效果也不太好,自己就是想在...
  • textview禁止点击

    千次阅读 2017-05-08 17:51:35
    textview.setClickable(true/false);
  • js事件-禁止点击拖拽

    千次阅读 2020-01-09 10:45:17
    一.手动触发回车键 $(window).on("keydown", function(e){ var ev = document.all ? window.event : e; if(ev.keyCode==13) { window.location.href = "VRegister.... } }) ...二.禁止点击拖拽选中复制 $(window).o...
  • disabled实现禁止点击效果
  • mian.js 文件里面: ...// 修改 el-dialog 默认点击遮照不关闭 ElementUI.Dialog.props.closeOnClickModal.default = false; // https://blog.csdn.net/huanhuan03/article/details/105426879/...
  • 完成日期和时间选择 ,条件是 8:00 - 20:00 。 type="datetime" 可以实现日期与时间同时选择但是不能自定义条件。 <el-date-picker v-model="dxDate" type="date" value-format="yyyy-MM-dd" ...
  • JS拖拽时禁止点击事件的三种方法

    千次阅读 2019-04-25 15:26:17
    做项目的时候碰到一个问题,表格列头点击排序,但是拖动列排序的时候也会触发表头的单击事件,找了一圈,大致都是两种思路,但是原理都一样。 就是js点击事件和拖拽事件都会执行mousedown(鼠标按下)和mouseup...
  • 接下来举例几个常用的方法~~~Android EditText 禁止点击 弹键盘方法1:在AndroidMainfest.xml中选择哪个activity,设置windowSoftInputMode属性为adjustUnspecified|stateHidden 方法2:让EditText失去焦点,使用...
  • 让a标签禁止点击的方法

    万次阅读 2017-10-24 17:16:55
    让a标签禁止点击的两个方法

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 181,377
精华内容 72,550
关键字:

禁止点击