Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别,总结如下:
Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,包括select, radio, checkbox, button等。但是表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去
(这句话的意思是后台得到的值是空值,填什么后台都拿不到,但是依然可以存储),而readonly会将该值传递出去(这种情况出现在我们将某个表单中的textarea元素设置为disabled或readonly,但是submit button却是可以使用的)。
一般比较常用的情况是:
①在某个表单中为用户预填了某个唯一识别代码,不允许用户改动,但是在提交时需要传递该值,此时应该将它的属性设置为readonly
②经常遇到当用户正式提交了表单后需要等待管理员的信息验证,这就不允许用户再更改表单中的数据,而是只能够查看,由于disabled的作用元素范围大,所以此时应该使用disabled,但同时应该注意的是要将submit button也disabled掉,否则只要用户按了这个按钮,如果在数据库操作页面中没有做完整性检测的话,数据库中的值就会被清除。如果说在这种情况下用readonly来代替disabled的话,若表单中只有input(text / password)和textarea元素,那还是可以的,如果存在其他发元素,比如select,用户可以在重新改写值后按回车键进行提交(回车是默认的submit触发按键)
③我们常常在用户按了提交按钮后,利用javascript将提交按钮disabled掉,这样可以防止网络条件比较差的环境下,用户反复点提交按钮导致数据冗余地存入数据库。
disabled和readonly这两个属性有一些共同之处,比如都设为true,则form属性将不能被编辑,往往在写js代码的时候容易混合使用这两个属性,其实他们之间是有一定区别的。
如果一个输入项的disabled设为true,则该表单输入项不能获取焦点,用户的所有操作(鼠标点击和键盘输入等)对该输入项都无效,最重要的一点是当提交表单时,这个表单输入项将不会被提交。
而readonly只是针对文本输入框这类可以输入文本的输入项,如果设为true,用户只是不能编辑对应的文本,但是仍然可以聚焦焦点,并且在提交表单的时候,该输入项会作为form的一项提交。
分享到:
相关推荐
form表单输入框input设置disable属性提交后,得不到该输入框的值,解决该类问题可以参考下面两个方法: 方法一: 使用readonly带替代disabled,即把 disabled="disabled" 修改为 readonly="readonly" 二者区别: ...
PS:下面看下elementui通过 disabled 属性指定是否禁用 input 组件,如何用DOM操作取消disabled 属性 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=...
input type=text value= readonly=readonly /> <input type=text value= disabled=disabled /> 举例中的两个控件都是不可修改的。但是他们也有一些区别! 从字面意思我们可以知道,试用readonly属性的...
1.表单:<form></form> 主要属性:id name action method 2.input元素:<input/> 主要属性:name type ...单选框和复选框:<input type="radio"/> <input type="checkbox"/> checked属性值为 true 或 false
001-我的第一个HTML页面 ...007-背景颜色和背景图片 008-图片 009-超链接或热链接 010-列表 011-表单form ...015-readonly和disabled 016-input控件的maxlength属性 017-HTML中元素的id属性 018-HTML中的div和span
我们先来讲讲表单中 中readonly和disabled的区别: readonly只对input和textarea有效, 但是disabled对于所以的表单元素都是有效的,包括radio,checkbox等 如果表单中使用的disabled那么用户是不能选择的,也就是说...
HTML Input 属性 value 属性 value 属性规定输入字段...input type="text" name="name" value="软件开发网" readonly> </form> readonly 属性不需要值。它等同于 readonly="readonly"。 disabled 属性 disable
每行中的字符数" rows="显示的行数"> 文本内容 表单控件 textarea可选属性 属性 属性值 描述 name 由用户自定义 控件的名称 readonly readonly 该控件内容为只读(不能编辑修改) disabled disabled 第一次加载页面...
优化 input 的 lay-affix 属性对于 disabled 或 readonly 时的状态处理 # I64AXW laydate 新增 rangeLinked 属性,用于是否开启日期范围选择时的区间联动标注模式,默认不开启 # 1172 优化 快捷选择列表及范围选择的...
NEW (12-Mar-08): In read only mode (using the 'readOnly' option or disabled property), the plugin is a neat way of displaying star-like values without any additional code <br>效果不错
1. readonly 將元素設置為只讀方式,也就是不能編輯的狀態,與disabled不同的是,readonly不會將字符變為暗灰色 <input type=text readonly value=READONLY> <input type=text disabled value=...
作用:保留源文档中的回车 和 空格 的作用 <pre></pre> 8、分区元素 1、块分区元素 语法:<div></div> 作用:布局 2、行内分区元素 语法:<span></span> 作用:设置同一行文字内的不同样式 9、行内元素 与...
<input name="lrcUp" type="button" class="btn_grey" value="上传文件" disabled="none" onClick="if(this.form.fileURL.value!=''){window.open('upLrcFile.jsp?fileName='+this.form.fileURL.value,'','width=...
代码: 代码如下:<input type=”text” value=”fisker” onclick=”alert(this.value);” onfocus=”this.blur()” /> 输入框无法获得焦点,不能编辑 表单可以...3,disabled 代码: 代码如下:<input t
<INPUT type="text" name="myclock" readonly="readonly" style="border-width: inherit; margin-left: 12px; background-color: #C7BFCE; width: 127px;" > </form> <form name="form1" method=...
-增加TabStrip中Tab控件可关闭属性EnableClose(默认为false)以及两个方法GetShowReference和GetHideReference(feedback:anson)。 -修正绑定到Tree的XMLDocument中Icon属性映射错误(feedback:nopnop9)。 -修正...
-增加TabStrip中Tab控件可关闭属性EnableClose(默认为false)以及两个方法GetShowReference和GetHideReference(feedback:anson)。 -修正绑定到Tree的XMLDocument中Icon属性映射错误(feedback:nopnop9)。 -修正...
命令和参数之间必需用空格隔开,参数和参数之间也必需用空格隔开。 一行不能超过256个字符;大小写有区分。 二、特殊字符含义 文件名以“.”开头的都是隐藏文件/目录,只需在文件/目录名前加“.”就可隐藏它。...
2、已经对 BCGPAppWizard2005 中的向导进行汉化,在 Visual Studio 2008(2010) 中可使用中文向导 BCGPAppWizard (参考 Visual Studio 2008 原有的中文向导,如果您想学习汉化向导,参考目录是:C:\Program Files\...
Development Value: "a=href,area=href,frame=src,input=src,form=fakeentry" ; Production Value: "a=href,area=href,frame=src,input=src,form=fakeentry" ; variables_order ; Default Value: "EGPCS" ; ...