input中disable与readonly的区别及其相关属性

最新推荐文章于 2023-12-15 22:57:33 发布
最新推荐文章于 2023-12-15 22:57:33 发布
阅读量5.4k 收藏 4
点赞数 1
分类专栏： 【Web前端】进阶
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/janus_java/article/details/54142921
版权

====== input中disable与readonly的区别 ======
<input name="country" id="country" size=12 value="disabled提交时得不到该值 " disabled="disabled" >
放在form表单中提交后得不到该值。
将disabled="disabled" 改为 readonly = "readonly" 即可

设置为disabled的input将会有下面的限制：

不能接收焦点
使用tab键时将被跳过
可能不是successful的
被限制的对象值将不会被传递到后台程序。

设置为readonly的input将会有下面的限制：

可以接收焦点但不能被修改
可以使用tab键进行导航
可能是successful的
只有successful的表单元素才是有效数据，也即是可以进行提交。
被限制的对象值与后台交互时值传递。


 ====== input相关属性设置 ======

    * 取消按钮按下时的虚线框,在input里添加属性值 hideFocus 或者 HideFocus=true 
<php><input type="submit" value="提交" hidefocus="true" /></php>
<html><input type="submit" value="提交" hidefocus="true" /></html>
 
    * 只读文本框内容,在input里添加属性值 readonly 
<html><input type="text" readonly /></html>
 
    * 防止退后清空的TEXT文档(可把style内容做做为类引用) 
<html><input type="text" style="behavior:url(#default#savehistory);" /></html>
    * ENTER键可以让光标移到下一个输入框 
<html><input type="text" οnkeydοwn="if(event.keyCode==13)event.keyCode=9" /></html>

 
    * 只能为中文(有闪动) 
<html><input type="text" οnkeyup="value=value.replace(/[ -~]/g,'')" οnkeydοwn="if(event.keyCode==13)event.keyCode=9" /></html>

 
    * 只能为数字(有闪动) 
<html><input type="text" οnkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" /></html>

 
    * 只能为数字(无闪动) 
<html><input type="text" style="ime-mode:disabled" οnkeydοwn="if(event.keyCode==13)event.keyCode=9" οnkeypress="if ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false" /></html>

 
    * 只能输入英文和数字(有闪动) 
<html><input type="text" οnkeyup="value=value.replace(/[\W]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" /></html>

 
    * 屏蔽输入法 
<html><input type="text" name="url" style="ime-mode:disabled" οnkeydοwn="if(event.keyCode==13)event.keyCode=9" /></html>
 
    * 只能输入 数字，小数点，减号（-） 字符(无闪动) 
<html><input οnkeypress="if (event.keyCode!=46 && event.keyCode!=45 && (event.keyCode<48 || event.keyCode>57)) event.returnValue=false" /></html>

 
    * 只能输入两位小数，三位小数(有闪动) 
<html><input type="text" maxlength="9" οnkeyup="if(value.match(/^\d{3}$/))value=value.replace(value,parseInt(value/10)) ;value=value.replace(/\.\d*\./g,'.')" οnkeypress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 && event.keyCode!=45 || value.match(/^\d{3}$/) || /\.\d{3}$/.test(value)) {event.returnValue=false}" /></html>

木炎焱
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈html中input只读属性readonly和disable的区别
09-28
下面小编就为大家带来一篇浅谈html中input只读属性readonly和disable的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
html form表单input使用disabled后提交不能获取表单值的解决方法
12-13
form表单输入框input设置disable属性提交后，得不到该输入框的值，解决该类问题可以参考下面两个方法： 方法一： 使用readonly带替代disabled，即把 disabled="disabled" 修改为 readonly="readonly" 二者区别： ...
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=&
input中readonly和disable的区别
恋&空的专栏
10-09 1576
1. disable——完全不可编辑，并且不能复制。 2.readonly——不可b
readonly 和disabled
junmoxie的专栏
09-18 489
怎样使input中的内容为只读，也就是说不让用户更改里面的内容。 最好不要用disabled,不然就无法取出里面的值了. 区别： 1.disabled -- 完全不可编辑，并且是不能复制的。 2.readonly -- 不可编辑，但是是可以复制。 3.Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元
form中的input可以设置为readonly 和 disable，二者有什么区别？
riemann_的博客
03-13 2491
Jquery的api中提供了对元素应用disabled和readonly属性的方法，在这里记录下。如下： readonly $('input').attr("readonly","readonly")//将input元素设置为readonly $('input').removeAttr("readonly");//去除input元素的readonly属性 if($('input')....
form中的input设置成readonly, 与设置成disable有何区别？
最新发布
金木讲编程
12-15 584
当将一个输入字段设置为 disabled 时，用户不能对该字段进行任何交互。输入字段会显示为灰色，用户无法点击、编辑、选择或复制其中的内容。这通常用于在表单中暂时禁用某个输入项，或者当某个条件不满足时禁用某个输入项。当将一个输入字段设置为 readonly 时，用户可以看到字段的内容，但不能修改它。用户仍然可以选中字段中的文本，复制它，但无法进行编辑。这通常用于显示现有数据，让用户查看但不允许修改。在HTML中， 元素是用于在表单中接收用户输入的元素。readonly 允许用户查看字段内容，但不允许编辑。
input禁止键盘及中文输入,但可以点击
12-10
禁止键盘及中文输入，但又不能用readonly 而且还需兼容ie 和 ff , 为了完成这功能费了蛮大功夫，呵呵，在此记录以便日后之用；另外禁止粘贴 onpaste=”return false” 代码如下:<!DOCTYPE HTML PUBLIC “-//W3C//...
elementUI 设置input的只读或禁用的方法
01-21
PS：下面看下elementui通过 disabled 属性指定是否禁用 input 组件，如何用DOM操作取消disabled 属性 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=...
input标签disabled禁用
月落星河
12-01 1083
input { border: none; } input:disabled { background-color: white; } 当你的input标签被禁用的时候，那么你的背景会是黑色的，所以你要去去掉禁用的颜色，以上代码就是去掉禁用的颜色。 ...
浅谈disabled与readonly的使用区别
weixin_46300114的博客
07-24 551
是用来限制用户与表单元素进行交互的两个属性。属性则只是限制用户对其进行修改。选择使用哪一个属性取决于我们想要实现的交互限制的具体需求。可以发现这里使用readonly达到了我们本次需求的目的。将disabled修改为readonly。属性会完全禁用一个表单元素，而。
disabled与readonly区别
文龙刚的博客
04-14 362
Readonly和Disabled 两种属性的写法如下。
input标签设置文本不可修改的两种状态（disable、readonly）区别
good_good_xiu的博客
04-02 3584
问题场景：一般我们在对数据的增删改查操作中，有一些数据是不允许修改的，比如创建时间等固定信息。 实际开发中，我们会使用disabled属性或者readonly属性将input文本框设置成不可修改。这两者有什么区别呢？ <input type ="text" name = "name" value = "XXX" disabled> disabled属性会使文本框变灰，而且后端通过request.getParameter(“name”)得不到文本框中的内容。原因是，在表单传输数据时，如果inpu
readonly与disabled的区别
qq_44473483的博客
07-01 1285
删除线格式 ## 一. 范围不同 readonly 只对 和 标签有效 disabled 对所有表单元素都有效, 包括：, , , , , 等 二. 程度不同 readonly 只是将元素设置为只读，不可输入，对其它操作没有影响 disabled 阻止元素的一切操作。包括 获取焦点，点击事件等 三. 表单提交 readonly 只是将元素设置为只读，不影响表单提交 disabled 设置了该属性的表单元素，值将不会随着表单一起提交 四. JavaScript操作 设置了readonly和disabled
html input readonly 和 disable的区别
u010090557的博客
07-08 558
  html input readonly 和 disable的区别      Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：      Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，但是表单元素在使用了disabled后...
css readonly和disabled的区别
qq_47776536的博客
12-23 8155
一、两者的联系 1、两个属性都可以作用于input等表单元素上，都使得元素成为“不可用”的状态； 2、两者的字面意义： （1）readonly表示“只读”，一般表示对于文字内容只读，即不可更改内容，对于非文字的表单“只读”与“不只读”似乎没有啥区别； （2）disabled表示“使残废，使无效”，都残废了，不管是什么内容，都是无效的。 二、两者的区别： 1、readonly和disabled作用元素的范围不同： 由上图可见，readonly并没有对input[type=“button”]产生作用，按钮效果
CSS：readonly与disabled属性
(づ｡◕‿‿◕｡)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭
02-17 6444
共同点：二者都不可被编辑； input的disable和readonly的区别：disabled： 在表单被提交的时候不会被发送 无法被focus，在使用tab切换表单项的时候也会被跳过 readonly： 在表单被提交时数据会被发送 可以被focus，也可以被tab切换选中
input标签readonly和disabled的区别
Golden_lion的博客
01-06 750
好像是readonly是可以往后面传递数据的,但是disabled是不可以往后面传递数据的,或者是不能修改value值的
el-form表单的disable属性和input输入框的disable属性有什么区别
07-07
el-form表单的disable属性和input输入框的disable属性有一些区别。 1. el-form的disable属性是用于禁用整个表单的，当设置为true时，整个表单中的所有元素都会被禁用，包括输入框、按钮、复选框等。这个属性通常用于表单的只读状态或者禁止用户进行任何操作的情况。 2. input输入框的disable属性是用于禁用单个输入框的，当设置为true时，该输入框将变为只读状态，用户无法编辑或输入任何内容。其他表单元素仍然可用。这个属性通常用于某些特定输入框需要禁止编辑的情况，比如展示一些只读数据。 总结起来，el-form的disable属性是用于禁用整个表单，而input输入框的disable属性是用于禁用单个输入框。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值