欢迎光临
我们一直在努力

使用readonly属性让失效文字更易阅读-PHP教程,PHP应用

建站超值云服务器,限时71元/月

已经厌倦了眯着眼睛看灰色文字?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>

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » 使用readonly属性让失效文字更易阅读-PHP教程,PHP应用
分享到: 更多 (0)

相关推荐

  • 暂无文章