使用readonly屬性讓失效文字更易閱讀

來源:互聯網
上載者:User
ado 已經厭倦了眯著眼睛看灰色文字?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>





相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。