完美解决textarea输入框提示文字,必须添加默认内容
来源:互联网 发布:开眼软件下载 编辑:程序博客网 时间:2024/06/01 09:34
<input>有placeholder标签,可以添加提示文字 ,但是<textarea>没有,一般来说我们是把提示内容写在<textarea>外面,如下图:
当然,这样的布局并不是最想要的效果,最想要的是文字显示在输入框内,点击输入框时隐藏,离开输入框时,如果输入框没有内容,又显示提示。
网上搜到的都是利用js通过获取或失去焦点来设置textarea的内容,这有个最大的问题就是:因为<textarea>设置了默认内容,如果用户不点击输入框,直接提交,就把默认的提示内容提交到后台了。
本人想出来的解决方案是:将提示内容写在一个div中,通过css的position属性来控制,将div显示到<textarea>中,点击<textarea>时,隐藏到div,这样即使用户不点击输入框直接提交,也不会把默认的提示文字提交到后台,效果如下图:
以下是代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>解决textarea输入框提示文字,必须添加默认内容</title><style type="text/css">body{font-size:12px;}p,div{margin:0;padding:0}.textarea{width:350px;height:80px;position:absolute;background:none;z-index:9}.note{position:absolute;line-height:20px;padding:3px 5px;}</style></head><body><div style="position:relative;"><textarea class="textarea" onfocus="document.getElementById('note').style.display='none'" onblur="if(value=='')document.getElementById('note').style.display='block'"></textarea><div id="note" class="note"><font color="#777">在这里写入你对服务商的额外要求,服务商等级,好评率等</font></div></div></body></html>
0 0
- 完美解决textarea输入框提示文字,必须添加默认内容
- 完美解决textarea输入框提示文字,必须添加默认内容
- HTML textarea输入框提示文字,添加默认内容
- 设置输入框默认文字内容
- input输入框添加提示文字
- js 给textarea输入框内容自动添加换行符
- 聚焦时提示内容变淡,输入文字时提示内容消失的输入框
- inupt textarea提示文字(点击消失,不输入恢复)
- inupt textarea提示文字(点击消失,不输入恢复)
- textarea 文字提示
- 解决 textarea 没有value 无法显示默认文字
- 解决 textarea 没有value 无法显示默认文字
- 解决 textarea 没有value 无法显示默认文字
- extjs完美实现“密码框显示提示文字,不显示输入文字”的变态需求!!!
- HTML中输入框添加提示文字并且点击消失
- textarea 提示文字,点击消失
- textarea提示文字换行显示
- html5 输入框提示文字
- C++多态的实现原理
- Josephus环
- 9.9递归和动态规划(十一)——算出有几种括号的放法可使该表达式得出result值
- CodeForces-570B Simple Game
- 成长
- 完美解决textarea输入框提示文字,必须添加默认内容
- 2015.08.14这一天,canopen 从站终于porting 有突破,可以与主站正常连接!!
- Android 一个app启动另一个app
- markdown插入图片
- Linux中yum和apt-get用法及区别
- 通过eclipse查看、阅读hadoop2.4源码
- 关于hibernate 1+n问题的一些总结
- 搜索
- JAVA生成图片验证码