飞龙博客

feilong.org 前端开发教程

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

飞龙更新于 2009-12-13 08:34 加入书签 CTRL+D 有 110 个朋友来过

文本区域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

飞龙初发:
2009-12-13 08:34
本文更新网址:
https://feilong.org/textarea-value

所在目录: 网站开发

新作:

旧文:

  • html css js
  • angular react vue
  • flutter python