<input> disabled 属性

最新推荐文章于 2023-02-19 14:58:24 发布
最新推荐文章于 2023-02-19 14:58:24 发布
阅读量408 收藏
点赞数
原文链接：https://my.oschina.net/u/3023307/blog/783520
版权

定义和用法

disabled 属性规定应该禁用输入字段。

被禁用的输入字段是无法使用和无法点击的。

如果使用该属性，则会禁用输入字段。

可以对 disabled 属性进行设置，使用户在满足某些条件时（比如选中复选框，等等）才能使用输入字段。然后，可使用 JavaScript 来删除 disabled 属性，使该输入字段变为可用的状态。

注释：disabled 属性不适用于 <input type="hidden">。

提示：被禁用的表单元素不会被提交。

这个地方吃过亏

转载于:https://my.oschina.net/u/3023307/blog/783520

chongpuyu0410
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue动态控制input的disabled属性的方法
12-29
有时候会有这样的需求，新增的时候可以输入，但是无法修改，此时就需要通过控制input标签的disabled属性来实现，那vue是如何动态设置input输入框的disabled属性的呢？ 输入框的html源代码 新增~ 通过F12查看实际页面渲染代码 修改~ 通过F12查看实际页面渲染代码 主要是通过 v-bind:disabled 绑定 dataForm.id 的值来动态判断是否添加 disable
使input文本框不可编辑的3种方法
热门推荐
u010210251的博客
11-08 16万+
今天试了一下使input文本框不可编辑的3种方法，现在总结一下： disabled 属性规定应该禁用 input 元素，被禁用的 input 元素，不可编辑，不可复制，不可选择，不能接收焦点,后台也不会接收到传值。设置后文字的颜色会变成灰色。disabled 属性无法与 一起使用。 示例： readonly 属性规定输入字段为只读可复制，但是，用户可以使用Tab键切
input元素的disabled属性
2301_76222589的博客
02-19 1440
input元素的disabled属性
【web】当input的属性设置为disabled=“disabled“时，表单不会提交此input的数据
Shino_jie的博客
06-11 2565
解决办法：1.在设置disabled="disabled"的同时另外设置一个隐藏的input，如： 2.使用readonly代替disabled="disabled" readonly和disabled是用在表单中的两个属性都可以做到使用户不可以更改表单域中的内容。 disabled：对于全部的表单元素都有效，包括select, radio, checkbox, button等。若是一个输入项的disabled设为true，则该表单输入项不能获取焦点，用户的全部操做（鼠标点击和键盘输入等）对该输入
input属性disabled和readonly的区别（超详细的~~~~）
白小纯的博客
10-16 1万+
1.两种情况的写法，没什么太大的区别，两个属性而已 disabled写法：&lt;input type="text" name="aaa" value="xxx" disabled="true"/&gt; readonly写法：  &lt;input type="text" name="bbb" value="xxx" readonly=&
HTML input标签中disabled属性
cheng1a的博客
01-26 2448
HTML 标签的 disabled 属性 这是一个不可输入的文本框 <input type="text" name="" disabled="disabled" /> 定义和用法： disabled 属性规定禁用 input 元素。 被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。 //disabl
html5的input的required使用中遇到的问题及解决方法
09-27
HTML5的`<input>`元素的`required`属性是一个强大的功能，它允许开发者在表单提交前强制用户填写必填字段。然而，在实际应用中，可能会遇到一些问题，特别是当这些字段在表单提交时被隐藏或者不可见时。本文将深入...
获取input标签的所有属性的方法
09-02
`<input>`标签还有许多其他常用属性，如`type`（定义输入类型，如文本、密码、日期等）、`id`（用于唯一标识元素）、`class`（用于CSS样式）、`placeholder`（提示信息）、`disabled`（禁用输入框）等。要获取这些...
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
10-15
disabled属性用于控制Input组件是否可编辑，当其值为`true`时，Input组件会被禁用，用户无法输入或修改内容；当其值为`false`时，Input组件启用，用户可以进行输入操作。在页面加载时，通常会根据业务需求设置初始...
input标签disabled属性
weixin_42594143的博客
03-02 1435
disabled 属性规定禁用 input 元素。 被禁用的 input 元素既不可用，也不可点击
vue 动态控制input输入框的disabled属性
月影神社
09-23 1万+
最近项目上提出一个经常遇到的需求，点击新增时input可输入，点击编辑时input置灰。写下过程，希望能帮助到大家。 1.首先在input上添加disabled属性 2.data中定义isDisabled值为false(可编辑) 3.在新增的点击事件中设置isDisabled=false(可编辑) .编辑的点击事件中设置isDisabled=true(不可编辑). 最后的效果就是文章最开头啦！ ...
input的disabled属性
woaixuexixixi的博客
06-07 5663
使用input的disabled属性后，无法通过getParameter()方法获取其属性。解决方法:disabled="disabled"  换为 readOnly="readOnly"两者效果一样，都是将编辑框设置为不可编辑状态。但是，readonly可以通过getParamet方法取值。...
关于input的disabled属性在移动端兼容问题
weixin_41395548的博客
02-09 742
如果给input添加disabled属性，IOS会检测到disabled属性，给输入框的默认字体设置上灰色和透明度，导致在IOS端 placeholder和输入的文本都呈现灰色，与安卓端表现不一致，安卓端没有这个问题。 我使用的是Vant中的Field输入框，找到的第一个方法： input[disabled],input:disabled,input.disabled{ color: #bbb; opacity: 1; -webkit-text-fill-color:#b
input框添加disabled属性
feitiandezhu1399的博客
08-22 8584
给input框添加disabled属性有以下三种方法 方法一：$("#ids").combobox({ disabled: true }) 方法二：$("#ids").attr("disabled", true ) 方法三：$("#ids").attr("disabled", "disabled" )...
关于input标签disabled="disabled"属性的一个坑
cuishao
04-03 1万+
一，问题代码： 1.原始HTML代码：<li><button class="normal-btn" id="start_capture" "startPktCapture()">开始抓包</button></li> <li><button class="normal-btn" id="stop_capture" style="dis...
input输入框添加/删除disabled属性
qq_39822451的博客
11-30 7393
            添加属性： $('#cosn').attr("disabled",true); $('#cntsn').attr("disabled","disabled"); 删除属性：  $('#cosn').attr("disabled",false);   $('#cosn').removeAttr("disabled");   $('#cosn').attr("disabled.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>信息填写</title> <script> window.onload = function() { var oBtn = document.getElementById("btn") oBtn.onclick = function () { alert("提交成功"); }; } </script> </head> <body> <h1>信息填写</h1> <form method="post"> 姓名:<input type="text" /><br /> <br /> 账号:<input type="text" /><br /> <br /> 密码:<input type="password" /> <br /> <br /> <form method="post"> 性别: <input type="radio" name="gender" value="男" />男 <input type="radio" name="gender" value="女" />女 </form> <br /> <select> <option>HTML</option> <option>CSS</option> <option>jquery</option> <option>javascript</option> <option>vue.js</option> </select> <br /> <br /> <input Id="btn" type="button" value="提交" /> </body> </html> 请改进这段代码
最新发布
05-27
这段代码有一些问题，我来逐个指出并提供改进的方案： 1. 没有为表单元素设置name属性，导致表单提交时无法获取表单数据。因此，需要给每一个表单元素都设置name属性，例如： ```html <input type="text" name="name"> ``` 2. 在性别选项中，使用了一个嵌套的form元素，这是不合法的HTML结构。应该将性别选项用label元素包裹，并为每个选项设置id属性，然后在label元素中使用for属性指向该选项的id，例如： ```html <label for="male"><input type="radio" id="male" name="gender" value="男">男</label> <label for="female"><input type="radio" id="female" name="gender" value="女">女</label> ``` 3. select元素没有设置name属性，也无法选择默认选项。应该给select元素设置name属性，并在其中加入一个默认选项（可以使用disabled和selected属性来禁止该选项被选中），例如： ```html <select name="language"> <option disabled selected>请选择语言</option> <option>HTML</option> <option>CSS</option> <option>jquery</option> <option>javascript</option> <option>vue.js</option> </select> ``` 4. input元素的id属性应该为小写字母。 下面是改进后的代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>信息填写</title> <script> window.onload = function() { var oBtn = document.getElementById("btn"); oBtn.onclick = function () { alert("提交成功"); }; } </script> </head> <body> <h1>信息填写</h1> <form method="post"> 姓名：<input type="text" name="name"><br> <br> 账号：<input type="text" name="account"><br> <br> 密码：<input type="password" name="password"><br> <br> <label for="male"><input type="radio" id="male" name="gender" value="男">男</label> <label for="female"><input type="radio" id="female" name="gender" value="女">女</label><br> <br> <select name="language"> <option disabled selected>请选择语言</option> <option>HTML</option> <option>CSS</option> <option>jquery</option> <option>javascript</option> <option>vue.js</option> </select><br> <br> <input id="btn" type="button" value="提交"> </form> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值