input变成不可编辑状态--disabled与readonly的区别

最新推荐文章于 2022-04-26 15:59:25 发布
最新推荐文章于 2022-04-26 15:59:25 发布
阅读量404 收藏
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/abckingaa/article/details/88743011
版权

input变成不可编辑状态--disabled与readonly的区别

 

disabled  文字会变成灰色，不可编辑。表单序列化提交到后台,会被忽略,不处理.

readonly  文字不会变色，与能编辑的输入框看起来没区别,但不能编辑。 表单序列化提交到后台,会处理.

以下为代码:

<div style="margin-bottom:10px">
	<input name="nameaaa" class="easyui-textbox" disabled label="姓名" style="width:100%">
</div> 
<div style="margin-bottom:10px">
	<input name="extbbb" class="easyui-textbox"  readonly label="备注" style="width:100%">
</div>

效果如下:

abckingaa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
通过disabled和readonly将input设置为只读效果
12-14
在HTML表单设计中，有时候我们需要用户只能查看输入框（input）中的内容而不能修改，这时我们可以使用`disabled`和`readonly`属性来实现只读效果。这两种属性虽然都能达到表面的只读目的，但它们在功能上存在显著...
表单文本框不可编辑，disabled与readonly区别
selaginella的专栏
03-14 2990
一般在更新表单数据时，不可避免的需要将文本框设置为不可编辑状态，使其不可修改（一般为主键），可以使用disabled=true 和readonly=true来实现，但是这两种情况是有些区别的。 区别： Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, b
easyui 所有控件只读属性使用教程
yqj234的专栏
04-26 2347
textbox控件 1.不可编辑 $(’#test’).textbox({ editable:false }); combobox控件 1.disable属性，灰色不可编辑 $("#id").combobox(‘enable’); //可用 $("#id").combobox(‘disable’); //不可用 $(’#id’).combobox({ disabled: true}); 注意： 设置{ disabled: true }属性后，此下拉框失去被渲染功能，（即对此下拉...
easyui textbox动态控制只读效果
周振伟的博客
12-15 5334
想做一个需求就是动态的控制textbox只读，但是发现给文本框设置了readonly之后，无法执行$(").textbox('setValue','');这个方法。 后来改用了disabled可以达到同样的只读的效果。 具体实现过程如下： 是否特殊： checked/>是 checked/>否 function changeReadOnly(){ if($("#isSpe
easyui textbox 设置成 readonly
周振伟的博客
10-24 1万+
textbox 用js动态设置成readonly $("#fuDaoDisCount").textbox('textbox').attr('readonly',false);
EasyUI的textbox的disable ,readonly 用法
dengshumi7891的博客
03-04 694
EasyUI的textbox,如果用了disable, 那么提交时,后台mvc controller是取不到值的, 如果用了Readonly, textbox的样式又没有变化, 让人一眼就感知到哪些是不能改的. 可以加上这样的样式,让readonly和disabled的样式一样 input:read-only { background...
easyui textbox 设置只读不可编辑状态
热门推荐
在路上的小马达
06-21 6万+
      在使用easyul的时候，发现输入框内容及不容易获取与设置，用jquery的方式大部分失效。依稀记得好像是因为easyul会在原页面的基础上，生成了一些新的独有样式，并且暂时覆盖掉使用了easyul的标签块。  具体我也忘记了，反正知道有这么会事就可以啦，--输入框$("#xx").textbox('setValue','value');  //设置输入框的值$('#xx').text...
让input变成不可编辑状态的方法.docx
03-10
和 readonly 属性类似，可以在 input 标签中添加 disabled 属性，以便让 input 变成不可编辑状态。例如：<input type="text" disabled="disabled" /> 3. 使用 JavaScript 代码 可以使用 JavaScript 代码来让 input...
让input变成不可编辑状态的方法.pdf
03-10
【标题】：“让input变成不可编辑状态的方法.pdf” 在HTML中，`<input>`标签用于创建用户可交互的表单元素，如文本框、按钮等。有时候，我们可能需要将一个`<input>`元素设置为不可编辑状态，以防止用户修改其中的...
disabled与readonly的作用及区别介绍
09-28
然而，这并不意味着完全不可更改，因为通过JavaScript或其他编程语言，我们仍然能够动态地修改`readonly`字段的值。例如，你可以编写一段脚本，在特定条件下解除`readonly`状态，允许用户进行编辑。`readonly`的典型...
javascript中input中readonly和disabled区别介绍
10-27
- 通过JavaScript，我们可以动态地改变一个输入元素的`readonly`属性，例如在上述例子中，`modify_phone`函数可以将`readonly`的输入框变为可编辑。 2. **`disabled` 属性**： - `disabled`属性适用于所有表单...
改变上传文件表单默认样式
hero_hope的博客
06-09 4734
一.上传文件表单默认样式    1.代码&lt;div style="margin-top:50px; text-align:center"&gt; &lt;form id="uploadForm" action="" method="post" enctype="multipart/form-data"&gt; &lt;input id="f
easyui label 编辑_easyui textbox 设置只读不可编辑状态
weixin_39856630的博客
12-22 334
在使用easyul的时候，发现输入框内容及不容易获取与设置，用jQuery的方式大部分失效。依稀记得好像是因为easyul会在原页面的基础上，生成了一些新的独有样式，并且暂时覆盖掉使用了easyul的标签块。 具体我也忘记了，反正知道有这么会事就可以啦，--输入框$("#xx").textbox(‘setValue‘,‘value‘); //设置输入框的值$(‘#xx‘).textbox(‘t...
浅析easyui中的readonly和h5中的readonly
iCheetor
07-28 2457
在使用easyui的过程中，有时会将input框的readonly属性和easyui的readonly属性混用，然后动态修改这一状态，但在easyui中如果使用h5的readonly属性，使用removeProp("readonly");方法后，虽然input框可以编辑，但value却获取不到最新编辑后的值。 代码如下：   &lt;div&gt; &lt;input type="t...
设置input标签readonly状态下的输入框颜色
全场梦游c的博客
11-28 9896
一般情况下 readonly状态下的输入框时灰色，如果想要改变颜色则需要添加一个css样式即可。 此操作将灰色改为白色。 &lt;style&gt; input[readonly]{ background-color: #ffffff      (可根据需要改颜色) } &lt;/style&gt;  ...
使用CSS使文本输入不可编辑
qq_43067585的博客
05-29 1423
在HTML中可以使用readonly属性创建不可编辑的文本输入。而在CSS的情况下，可以使用pointer-events属性使文本输入不可编辑。下面本篇文章就来给大家介绍一下，希望对大家有所帮助。 CSS pointer-events属性是一个指针属性，可以使用以下语句来停止指针事件，让文本输入不可编辑。 pointer-events：none; 示例：此示例显示两个输入文本，其中一个是不可编辑的。 <!DOCTYPE html> <html> <head&
WPF ComboBox样式
weixin_53370274的博客
12-31 2194
一、样式的样子就是这样的 二、样式Style - 不可编辑请设置 属性为ReadOnly=true属性 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.m...
easyui-textbox禁用时，增加样式
weixin_34143774的博客
02-12 219
为什么80%的码农都做不了架构师？>>> ...
el-input 禁止修改
最新发布
08-21
若想禁止修改el-input组件，可以使用属性:readonly或:disabled进行设置。其中，属性:readonly可以让输入框只读，用户无法修改其内容，但仍可以选中或复制文本。而属性:disabled可以使输入框变成不可编辑状态，用户既无法修改内容，也无法选中或复制文本。 如果你使用的是element-ui库的el-input组件，在代码中可以通过设置属性:readonly="true" 或 :disabled="true" 来禁止修改el-input组件。例如：<el-input :readonly="true" /> 或 <el-input :disabled="true" /> 。 需要注意的是，属性disabled的值应为一个布尔值（Boolean），而不是字符串。如果将其设置为字符串"true"，将会出现错误提示："invalid prop: type checked failed for prop 'disabled'. Expected Boolean, got String with value 'true'".<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Html5页面上如何禁止手机虚拟键盘弹出](https://download.csdn.net/download/weixin_38698863/13134515)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue中的el-input设置灰显不可编辑](https://blog.csdn.net/dxjren/article/details/127899136)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值