文本框中提示文字

来源:互联网 发布:linux定时器crontab 编辑:程序博客网 时间:2024/04/29 15:19

现在在jsp做页面展示,为了有更好的用户体验,我们可能需要在某一个文本框中给一个信息提示,类似于“请输入标题”,这个字体往往呈现处灰色的,具体色彩很接近#CCC,

当我们点击这个文本框的时候,这段字就消失了,转而字体颜色也变成正常的黑色,下面说一个思路。

当然先实现下面的功能肯定是你的文本框中有一个默认值的,类似于“请输入标题”

先给这默认的字体一个颜色:$('#id').css('color','#CCC'); //这个就是给一个默认颜色为浅灰色

并且在该标签内写一个onclick时间,也就是说当我们点击这个文本框的时候要触发的事件:displayStyle("id");//参数就是当前标签的ID

在js中我们先定义一个数组:

function displayStyle(id){var _value = document.getElementById(id).value;var fontArray = new Array("请输入标题","请输入正文");for(var i=0;i<fontArray.length;i++){if(_value == fontArray[i]){document.getElementById(id).value="";$('#' + id).css('color','black');document.getElementById(id).focus();}}}


上面的代码很容易看懂,就是我们点击某一个文本框的时候传过来该文本框的ID,我们判断该文本框中默认内容是不是存在在数组fontArray中,如果存在,我们将该标签中的内容置空,然后调整样式,就是调整字体颜色为黑色,在把焦点给当前标签即可。