Bootstrap 禁用输入框 key:input disabled fieldset pointer-events: none - Bootstrap 表单布局

Bootstrap 禁用输入框

W3CSchool > bootstrap3中文手册 > Bootstrap 表单布局 > Bootstrap 禁用输入框

被禁用的输入框

为输入框设置 disabled 属性可以防止用户输入,并能对外观做一些修改,使其更直观。

如果您想要禁用一个输入框 input,只需要简单地添加 disabled 属性,这不仅会禁用输入框,还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。如下面实例所示:

 
  1. <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled > 

被禁用的 fieldset

<fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件。

<a> 标签的链接功能不受影响

我们试图通过设置 pointer-events: none 来禁用 <a class="btn btn-*"> 按钮的链接功能,但是这个 CSS 属性尚未标准化,目前也没有被所有浏览器支持,包括 Opera 18 或 Internet Explorer 11 及更低版本。建议用户自己通过 JavaScript 代码禁用链接功能。

跨浏览器兼容性

虽然 Bootstrap 会将这些样式应用到所有浏览器上,Internet Explorer 11 及以下浏览器中的 <fieldset> 元素并不完全支持 disabled 属性。因此建议在这些浏览器上通过 JavaScript 代码来禁用 <fieldset>

  1. <form role="form"> 
  2.   <fieldset disabled> 
  3.     <div class="form-group"> 
  4.       <label for="disabledTextInput">Disabled input</label> 
  5.       <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"> 
  6.     </div> 
  7.     <div class="form-group"> 
  8.       <label for="disabledSelect">Disabled select menu</label> 
  9.       <select id="disabledSelect" class="form-control"> 
  10.         <option>Disabled select</option> 
  11.       </select> 
  12.     </div> 
  13.     <div class="checkbox"> 
  14.       <label> 
  15.         <input type="checkbox"> Can't check this 
  16.       </label> 
  17.     </div> 
  18.     <button type="submit" class="btn btn-primary">Submit</button> 
  19.   </fieldset> 
  20. </form> 

没有找到答案?搜索一下吧!

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)