使用readonly属性让失效文字更易阅读
日期：2011-01-11 浏览次数：20416 次
已经厌倦了眯着眼睛看灰色文字？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</texta
现在我发现自己变老的确切信号不是周身不适，而是要理解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</texta
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
