您现在的位置: 365建站网 > 365文章 > 区别Web文本框和HTML文本框的RandOnly、Disabled

区别Web文本框和HTML文本框的RandOnly、Disabled

文章来源:365jz.com     点击数:394    更新时间:2011-01-29 09:34   参与评论

    使用ReadOnly和Enable(HTML控件:Disabled)都能使用户不能够更改内容,二者区别是:

    1、Readonly只针对input(text/password)和textarea有效,而disabled对于所有的表单元素有效,包括select,radio,checkbox,button等。

    2、在表单元素使用了disabled后,我们将表单以POST或者GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去。    

    需要一个这样的文本框,不能手工更改内容,但JS可以,也可以回传。

在页面添加一个Web文本框控件(asp:TextBox),设置为readonly,以为大功告成,谁知道一点击回发,文本框中的内容还是之前的,没改变。于是取消readonly,通过不可焦距、剪切、粘贴等方法让用户不可更改内容,弄出了一个假的不可编辑,哈哈,还挺满足的!

    今日得闲,写下如下代码测试。

代码

</>code

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ Register Src="~/UC/XwTreeDropDownList/XwTreeDropDownList.ascx" TagPrefix="uc"
    TagName
    ="XwTreeDropDownList" %>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    </head>
    <body>
    <form id="form1" runat="server">
    <table style="width: 100%;">
    <tr>
    <td>
    &nbsp;
    </td>
    <td>
    newReadOnly
    </td>
    <td>
    ReadOnly
    </td>
    <td>
    Disabled
    </td>
    </tr>
    <tr>
    <td>
    asp:TextBox
    </td>
    <td>
    <asp:TextBox ID="txtNewReadOnly1" runat="server" onfocus="this.blur();" onpaste="return false"
    oncut
    ="return false" Text="txtNewReadOnly1"></asp:TextBox>
    </td>
    <td>
    <asp:TextBox ID="txtReadOnly1" runat="server" ReadOnly="true" Text="txtReadOnly1"></asp:TextBox>
    </td>
    <td>
    <asp:TextBox ID="txtDisabled1" runat="server" Enabled="false" Text="txtDisabled1"></asp:TextBox>
    </td>
    </tr>
    <tr>
    <td>
    input:Text
    </td>
    <td>
    <input runat="server" id="txtNewReadOnly2" type="text" onfocus="this.blur();" onpaste="return false"
    oncut
    ="return false" value="txtNewReadOnly2" />
    </td>
    <td>
    <input runat="server" id="txtReadOnly2" type="text" readonly="readonly" value="txtReadOnly2" />
    </td>
    <td>
    <input runat="server" id="txtDisabled2" type="text" disabled="disabled" value="txtDisabled2" />
    </td>
    </tr>
    </table>
    <asp:Button ID="Button1" runat="server" Text="回发" OnClick="Button1_Click" />
    <input id="Button2" type="button" value="JS设置值" onclick="changeTxtValue();" />
    </form>
    </body>
    </html>

    <script type="text/javascript">
    function changeTxtValue() {
    document.getElementById(
    'txtNewReadOnly1').value = "txtNewReadOnly1" + new Date().getTime();
    document.getElementById(
    'txtReadOnly1').value = "txtReadOnly1" + new Date().getTime();
    document.getElementById(
    'txtDisabled1').value = "txtDisabled1" + new Date().getTime()
    document.getElementById(
    'txtNewReadOnly2').value = "txtNewReadOnly2" + new Date().getTime();
    document.getElementById(
    'txtReadOnly2').value = "txtReadOnly2" + new Date().getTime();
    document.getElementById(
    'txtDisabled2').value = "txtDisabled2" + new Date().getTime()
    }
    </script>

 

代码

</>code

  1. protected void Button1_Click( object sender, EventArgs e )
    {
    Response.Write(
    "asp:TextBox<br/>" );
    Response.Write(
    string.Format( "txtNewReadOnly1: {0}<br/>", Request.Form[ "txtNewReadOnly1" ] ) );
    Response.Write(
    string.Format( "txtReadOnly1: {0}<br/>", Request.Form[ "txtReadOnly1" ] ) );
    Response.Write(
    string.Format( "txtDisabled1: {0}<br/>", Request.Form[ "txtDisabled1" ] ) );

    Response.Write(
    "<br/>" );

    Response.Write(
    "input:text<br/>" );
    Response.Write(
    string.Format( "txtNewReadOnly2: {0}<br/>", Request.Form[ "txtNewReadOnly2" ] ) );
    Response.Write(
    string.Format( "txtReadOnly2: {0}<br/>", Request.Form[ "txtReadOnly2" ] ) );
    Response.Write(
    string.Format( "txtDisabled2: {0}<br/>", Request.Form[ "txtDisabled2" ] ) );
    }

 

    点击“JS设置值”按钮,设置各控件的值,点击“回发”按钮,结果如下:

 

    看到区别了吧!readonly的值是回传了,diabled控件的值没回传,但最奇怪的是,txtReadOnly1和txtReadOnly2回传之后的值居然不一样,Web控件和HTML控件有差别!其实我需要的文本框只需将HTML文本框设置为readonly就ok了,不用那么复杂。

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (394人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号