使用readonly属性让失效文字更易阅读
2024-05-04 22:54:32
供稿：网友
已经厌倦了眯着眼睛看灰色文字？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>
