Input只读属性详解,htmlinput只读属性

By admin in 4858美高梅 on 2019年8月10日

html input设置为只读属性,htmlinput只读属性

有两种艺术能够落成input的只读效果:disabled 和 readonly。

自然二种出来的成效都是只可以读取不能够编辑,不过两个有相当大区别。

Disabled表明该input无效,及其value不会传送给任何程序,比如asp、php等。
Readonly仅仅是力不能支编辑,不影响其值的传递。

Disabled使用:<INPUT type=”text” name=”username” value=”james”
disabled>

Readonly使用:<INPUT type=”text” name=”partNumber” value=”1500″
readonly>

input设置为只读属性,htmlinput只读属性
有二种方式得以兑现input的只读效果:disabled 和 readonly。
自然二种出来的效劳都以只可以读取不能够…

将输入框设置为只读状态,即内部的原委不可编辑

Readonly和Disabled是用在表单中的两性情格,它们都能够达成使用户不可知改动表单域中的内容。可是它们中间有着微小的歧异,计算如下:

Input只读属性详解

落到实处这种设计的点子有两种,分别是使用input的disable和readonly多个天性,然则她们事先依然有部分界其他。

Readonly只针对input(text /
password)和textarea有效,而disabled对于具有的表单成分都使得,包括select,
radio, checkbox,
button等。但是表单成分在采取了disabled后,当我们将表单以POST或GET的主意提交的话,那么些成分的值不会被传送出去,而
readonly会将该值传递出去(这种气象出现在大家将有个别表单中的textarea成分设置为disabled或readonly,然而submit
button却是能够使用的)。

1.1概述
        Readonly和Disabled都能够不负众望使用户不可见改动表单域中的内容。
1.2 Readonly和Disabled的区别
1、Readonly只针对input[type=”text /
password”]和textarea有效,而disabled对于持有的表单成分都使得。
2、设置disabled属性后,当表单以POST或GET的方法提交的时其值不会被传送出去,而readonly会将该值传递出去(readonly接受值退换可以回传,disable接受改但不回传数据)。
3、一个输入项设置disabled为true,则该表单输入项不可能博取关节,用户的兼具操作(鼠标点击和键盘输入等)对该输入项都行不通。而设置readonly为true,则用户只是无法编辑对应的文书,可是仍可以够聚集难点。
1.3实情疏解
常用的动静:
       
当在有个别表单中为用户预填了有个别独一识别代码,差别意用户改换,可是在付给时需求传递该值,此时应该将它的性质设置为readonly

       
当用户正式交付了表单后供给拭目以俟管理员的音讯认证,那时区别意用户再更换表单中的数据,而是只好够查阅,由于disabled的效用成分范围大,所以那时候应有选拔disabled,同不经常间应当专注的是要将submit/button也disabled掉,不然假如用户按了那一个按键,如若在数据库操作页面中从不做完整性检验的话,数据库中的值就能被铲除。
       
在用户按了付出按键后,利用javascript将付出按键disabled掉,那样可防止止网络条件非常差的情况下,用户一再点提交按键导致数据冗余地存入数据库。

<INPUT   TYPE= “text ”   readonly= “true ”   value= “这是ReadOnly的!
“>
<INPUT   TYPE= “text ”   disabled= “true ”   value= “那是Disabled的!
“>能够看到,固然二种都以让INPUT的内容不能被用户编辑,可是对于中期的美术管理就不日常了!

例子

*
比如:
<style>
input
{
color:blue;
Input只读属性详解,htmlinput只读属性。}
</style>

复制代码 代码如下:

独有ReadOnly的不行文本是乌紫的!
Disabled是按系统装置的Disabled颜色来安装前景观的,CSS对其低效!*

body>
<form id=”form1″ name=”form1″ method=”get” action=””>
<input name=”q1″ type=”text” id=”q1″ value=”readonly” readonly=”true”
/>
<input name=”q2″ type=”text” disabled=”disabled” id=”q2″
value=”disabled” />
<input type=”submit” name=”Submit” value=”Submit” />
</form>

除此以外,readonly和disabled还会有三个区别点就是,当input属性为readonly时,提交表单是能够获取input的剧情,可是只即使disabled则不能博取所提交的从头到尾的经过,再次来到值全体为null,所以那边须要专注。要慎用readonly和disabled, 内定了disabled的表单,在submit时,不会把它的值传出去, 如下所示,有三个text,三个是readonly二个是disabled,submit后,只好发送那么些不是disabled的,注意地址栏的值.
要封存到本地,因为submit了,不然,看不到效果.
<input type=”text” value=”只读是足以读取其文字内容的但不可能编辑和输入”
readonly size=”100″>
<input type=”text” value=”文字变灰不可能读取其文字内容也不能编辑和输入”
disabled size=”100″>

js调节代码

复制代码 代码如下:

<body>
<form enctype=”multipart/form-data” action=”sign.php” method=”post”
name=”moblie_act_form” id=”moblie_act_form” >
<input type=”text” class=”input” id=”mobile” name=”mobile”
value=”{$mobile}” readonly=”true” disabled=”disabled”>
<input type=”button” value=”修改” onClick=”modify_phone()”>
</form>
</html>
<script language=”javascript”>
function modify_phone(){
if(confirm(“您鲜明要修改您的手提式有线电话机号码吗?”)){
document.moblie_act_form.mobile.readOnly = false;
document.moblie_act_form.mobile.disabled = false;
}
return true;
}
</script>

实例

复制代码 代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>Untitled Document</title>
</head>

<body>
<form id=”form1″ name=”form1″ method=”get” action=””>
<input name=”q1″ type=”text” id=”q1″ value=”readonly” readonly=”true”
/>
<input name=”q2″ type=”text” disabled=”disabled” id=”q2″
value=”disabled” />
<input type=”submit” name=”Submit” value=”Submit” />
</form>
</body>
4858美高梅 ,</html>

属性 值 描述 disabled disabled

当 input
成分第三遍加载时禁止使用此因素,那样用户就不能在里面写文本,或选定它。
注明:不可能与 type=”hidden” 一同使用。

readonly readonly
指令此域的值不能被修改。
评释:仅可与 type=”text” 同盟使用。

**总结

**readonly代码:<input type=”text” name=”readonly” readonly=”readonly”
/>
readonly不可编辑,可复制,可采取,可以摄取大旨但不可能被涂改,后台会吸收接纳到传值.
disabled代码: <input type=”text” name=”disabled” disabled=”disabled”
/>
disabled不可编辑,不可复制,不可采取,无法吸收接纳核心,后台也不会接到到传值

你或然感兴趣的文章:

  • readonly和disabled的区别
  • HTML中Select不用Disabled实现ReadOnly的效果
  • jquery设置元素的readonly和disabled的写法
  • jquery批量设置属性readonly和disabled的艺术
  • 表单中Readonly和Disabled的不相同详解
  • readonly和disabled属性的界别

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有