readonly和disabled分裂详解

方法如下:

 在html中input的性质readonly和disabled让广大客商都是为是千篇一律的,上边小编来给大家介绍readonly和disabled差异,有须求领悟的相恋的人可参照。

复制代码 代码如下:

先看input的性质定义:
 
属性 值 描述

<select onbeforeactivate="return false" onfocus="this.blur()" onmouseover="this.setCapture()" onmouseout="this.releaseCapture()">  
<option>1</option> 
</select>

disabled  disabled 当 input 成分第一回加载时禁止使用此因素,那样客商就不可能在内部写文本,或选定它。 
讲授:不能够与 type="hidden" 一起使用。
 
readonly  readonly  提醒此域的值不可能被改变。 
讲明:仅可与 type="text" 同盟使用。  

您或然感兴趣的稿子:

  • readonly和disabled的区别
  • javascript中input中readonly和disabled区别介绍
  • jquery设置成分的readonly和disabled的写法
  • jquery批量设置属性readonly和disabled的办法
  • 表单中Readonly和Disabled的不同详解
  • readonly和disabled属性的差距

别的笔者再看看那五个区分,先看代码:

  
readonly代码:<input type="text" name="readonly" readonly="readonly"  />

readonly不可编辑,可复制,可挑选,能够收到核心但不能够被修改,后台会接到到传值.

disabled代码: <input type="text"  name="disabled" disabled="disabled" />

disabled不可编辑,不可复制,不可选择,无法接收核心,后台也不会接到到传值

作者们平日在顾客按了付出开关后,利用javascript将提交开关disabled掉,那样能够免止网络条件相当差的境况下,客户反复点提交按键导致数据冗余地存入数据库。

disabled和readonly这两日性格有一点共同之处,举个例子都设为true,则form属性将无法被编辑,往往在写js代码的时候轻松混合使用那三个属性,其实她们中间是有早晚差其余。

假设一个输入项的disabled设为true,则该表单输入项不可能获取关节,客户的具有操作(鼠标点击和键盘输入等)对该输入项都行不通,最要紧的一点是当提交表单时,那几个表单输入项将不会被提交。

而readonly只是针对文本输入框这类能够输入文本的输入项,固然设为true,客商只是不能够编辑对应的文件,不过如故能够聚焦火爆,并且在付出表单的时候,该输入项会作为form的一项提交。

 代码如下

复制代码

<!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>

</html>

小技巧:

diabled:可用readonly代替,background-color:#cccccc;加上天灰背景象就足以

 代码如下

复制代码

<input id="mytext" type="text" value="小编是没办法用的">
<input type="button" value="disabled" onClick="javascript: document.all.mytext.disabled='false'">
<input type="button" value="enable" onClick="javascript: document.all.mytext.removeAttribute('disabled')">

专一:document.all.mytext.disabled=true;表单控件不能够用

document.all.mytext.disabled=false;表单控件能用

 代码如下

复制代码

<input id="mytext" type="text" value="小编是能用的">
<input type="button" value="disable" onClick="if (mytext.disabled==false){ mytext.disabled=true;mytext.value='作者是不可能用的';this.value='enable'} else { mytext.disabled=false;mytext.value='笔者是能用的';this.value='disable'}">

jquery设置成分的readonly和disabled

1、readonly

 

 代码如下

复制代码

   $('input').attr("readonly","readonly")//将input元素设置为readonly

    $('input').removeAttr("readonly");//去除input元素的readonly属性
 
    if($('input').attr("readonly")==true)//判定input成分是还是不是早就设置了readonly属性  

    对于为因素设置readonly属性和收回readonly属性的方式还会有如下三种:
    $('input').attr("readonly",true)//将input元素设置为readonly
    $('input').attr("readonly",false)//去除input元素的readonly属性

    $('input').attr("readonly","readonly")//将input成分设置为readonly
    $('input').attr("readonly","")//去除input元素的readonly属性

 2、disabled

 代码如下

复制代码

    $('input').attr("disabled","disabled")//将input成分设置为disabled

    $('input').removeAttr("disabled");//去除input元素的disabled属性
 
    if($('input').attr("disabled")==true)//决断input成分是还是不是业已设置了disabled属性

    对于为要素设置disabled属性和收回disabled属性的法门还应该有如下二种:
    $('input').attr("disabled",true)//将input成分设置为disabled
    $('input').attr("disabled",false)//去除input元素的disabled属性

    $('input').attr("disabled","disabled")//将input成分设置为disabled
    $('input').attr("disabled","")//去除input元素的disabled属性

除去属性推荐应用removeAttr()这种方法,新本子jquery会不帮助attr("readonly","")这种写法

先看...

本文由华夏彩票发布于华夏彩票网络,转载请注明出处:readonly和disabled分裂详解

您可能还会对下面的文章感兴趣: