jQuery简单实现input文本框内灰色提示文本效果的方法
本文实例讲述了jQuery简单实现input文本框内灰色提示文本效果的方法。分享给大家供大家参考，具体如下：
$(function(){
$(".grayTips").each(function(){ //遍历每个文本框
var objTextBox=$(this);
var oldText=$.trim(objTextBox.val());
objTextBox.css("color","#888");
objTextBox.focus(function(){
if(objTextBox.val()!=oldText){
objTextBox.css("color","#000");
objTextBox.val("").css("color","#888");
objTextBox.blur(function(){
if(objTextBox.val()==""){
objTextBox.val(oldText).css("color","#888");
objTextBox.keydown(function(){
objTextBox.css("color","#000");
说明：需要引入jquery.js文件& input和TextBox都有效
$(function(){
$(".grayTip").each(function(){
var $input=$(this);
$input.css("color","#888");
var oldText=$.trim($input.val());
$input.focus(function(){
var newText=$.trim($input.val());
if (newText==oldText){
$input.val("");
$input.css("color","#000");
$input.blur(function(){
var newText=$.trim($input.val());
if(newText==""){
$input.val(oldText);
$input.css("color","#888");
希望本文所述对大家jQuery程序设计有所帮助。
顶一下(0) 踩一下(0)
热门标签：后使用快捷导航没有帐号？
只需一步，快速开始
查看: 4485|回复: 4
求教：怎样让input输入框的初始值文字为灰色，自己输入的文字为黑色呀？
UID427367在线时间 小时积分667帖子离线17013 天注册时间
高级会员, 积分 667, 距离下一级还需 333 积分
怎样让input输入框的初始值文字为灰色，自己输入的文字为黑色呀？
UID398198在线时间 小时积分39帖子离线17013 天注册时间
新手上路, 积分 39, 距离下一级还需 11 积分
&style type=&text/css&&
.hui {color:#666;}
.hei {color:#000;}
&input type=&text& class=&hui& value=&我是灰色的& onclick=&if(this.value=='我是灰色的'){this.value='';this.className='hei'}& onblur=&if(this.value==''){this.value='我是灰色的';this.className='hui'}& /&
&提示：您可以先修改部分代码再运行
UID398198在线时间 小时积分39帖子离线17013 天注册时间
新手上路, 积分 39, 距离下一级还需 11 积分
这样能实现- -！但一定不是最好的，交差而已嘿嘿..
UID427367在线时间 小时积分667帖子离线17013 天注册时间
高级会员, 积分 667, 距离下一级还需 333 积分
谢谢啦，呵呵，不过能不能用CSS实现呢？
UID398198在线时间 小时积分39帖子离线17013 天注册时间
新手上路, 积分 39, 距离下一级还需 11 积分
能力所限...
估计没有...
Powered by下次自动登录
现在的位置:
& 综合 & 正文
input文本框添加灰色提示文字
&input name="username" value="请输入用户名" style="color:#CCC" size="15" class="t_input_1" type="text" onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#000';this.className='t_input';}" onblur="if(this.value==''){this.value='请输入用户名';this.style.color='#CCC';this.className='t_input_1'}"&
&&&&推荐文章:
【上篇】【下篇】HTML5中input背景提示文字(placeholder)的CSS美化 – WEB骇客输入框里的灰色提示文字
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
http-equiv="Content-Type" content="text/
charset=utf-8"&
&&&title&&/title&
&&&.font1{
&&&&color:#
&&&&color:
&&&/style&
type="text" value="请输入搜索结果" class="font1"
onblur="if(this.value==''){this.value='请输入搜索结果';this.className='font1'}"
onfocus="if(this.value==this.defaultValue){this.value='';this.className='font2'}"&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。}