飞龙博客

深入经藏 智慧如海

文本区域textarea默认提示消失重现最佳解决方案

feilong.org 修订于2011-06-04 09:50:32 2,810

文本区域textarea如何设置默认值value?悬停或点击文本框后能否自动消失?不点击又如何重新出现?输入文本后,再点击文本区域,还能依然保留输入的文字?

如此高要求的文本区域,可以不是随便找个点击就消失的代码能解决的。想用javascript实现吗?飞龙可不想哟!

于是多次试验,飞龙终于找了一个最好的实现办法,textarea标签里用到了onmouseover、onfocus、onmouseout,当然还有value、blur。本文更新网址:http://feilong.org/textarea-value 2009年12月13日飞龙第1次修订。

<textarea name="comment" id="comment" cols="5" rows="10" tabindex="4" onmouseover="focus()" onfocus="if(value=='feilong.org:多看,好处多呢') {value=''}" onmouseout="blur()" onblur="if (value=='') {value='feilong.org:多看,好处多呢'}">feilong.org:多看,好处多呢</textarea>

没有用到javascript代码,在ie8和firefox显示正常。飞龙认为,这是文本区域textarea默认提示消失重现最佳解决方案。飞龙感觉,用户体验超好!

关于文本框input的value类似效果,参见:http://feilong.org/input-value

更新网址:http://feilong.org/textarea-value
最初发布:20091213 08:34:02 feilong.org 于广州

加入收藏夹,查看更方便。

所在分类: 网站开发

新作:

旧文:

飞龙前端QQ群