使用readonly属性让失效文字更易阅读

ZDNet软件频道 时间:2004-09-07 作者:Builder.com |  我要评论()
本文关键词:
已经厌倦了眯着眼睛看灰色文字?Readonly可以为你提供一种更好的解决方案
本文译自Builder.com,未经许可请勿转载

已经厌倦了眯着眼睛看灰色文字?Readonly可以为你提供一种更好的解决方案

现在我发现自己变老的确切信号不是周身不适,而是要理解Web页面中输入框或文本区域中失效文字(disabled text)所表达意思已经变得越来越困难。对于像我这样怀念古老的Windows 2000的老家伙来说,那些灰色的文字似乎已经有同背景融为一体的趋势。

幸好,还有比做眼部激光外科手术更为廉价的解决方案,即使用名为readonly的属性。该属性将按照同正常文本相同的对比度来显示失效文字,同时仍然保持文字“远观而不可亵玩焉”的失效特性。这成为了平衡二者的最佳方式。

列表A显示了如何使用这一属性的示例,列表B则显示了实际中的情况。总之,这绝对是比拜访眼科医生更为廉价的选择。

列表A:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'

    'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>

        <title>Read Only</title>

    </head>

    <body>

        <table width="100%" border="0px" cellspacing="0px"

        cellpadding="0px">

            <tr>

                <th width="33%"

                align="left">Normal:</th>

                <th width="33%"

                align="left">Disabled:</th>

                <th align="left">Read

                Only:</th>

            </tr>

            <tr>

                <td width="33%">

                    <input type="text"

                    id="txtNormal"

                    name="txtNormal" size="10"

                    value="xyzzy" />

                </td>

                <td width="33%">

                    <input type="text"

                    id="txtDisabled" name="txtDisabled"

                    size="10" value="xyzzy"

                    disabled="disabled" />

                </td>

                <td>

                    <input type="text"

                    id="txtReadOnly" name="txtReadOnly"

                    size="10" value="xyzzy"

                    readonly="readonly" />

                </td>

            </tr>

            <tr>

                <td width="33%">

                    <textarea id="areaNormal"

                    rows="4" cols="30">Always

                    do right. This will gratify

                    some people and astonish the

                    rest. - Mark

                    Twain</textarea>

                </td>

                <td width="33%">

                    <textarea id="areaDisabled"

                    rows="4" cols="30"

                    disabled="disabled"

                    readonly="readonly">Always do

                    right. This will gratify some

                    people and astonish the rest. -

                    Mark Twain</textarea>

                </td>

                <td>

                    <textarea id="areaReadOnly"

                    rows="4" cols="30"

                    readonly="readonly">Always do

                    right. This will gratify some

                    people and astonish the rest. -

                    Mark Twain</textarea>

                </td>

            </tr>

        </table>

    </body>

</html>

 



责任编辑:李宁

欢迎评论投稿

百度大联盟认证黄金会员Copyright© 1997- CNET Networks 版权所有。 ZDNet 是CNET Networks公司注册服务商标。
中华人民共和国电信与信息服务业务经营许可证编号:京ICP证010391号 京ICP备09041801号-159
京公网安备:1101082134