jQuery实现input文本框内灰色提示文本效果
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input test</title>
<script type="text/javascript"
src="./js/jquery.js"></script>
<script type="text/javascript">
function inputTipText(){
$("input[class*=grayTips]") //所有样式名中含有grayTips的input
.each(function(){
var oldVal=$(this).val(); //默认的提示性文本
$(this)
.css({"color":"#888"}) //灰色
.focus(function(){
if($(this).val()!=oldVal){$(this).css({"color":"#000"})}else{$(this).val("").css({"color":"#888"})}
})
.blur(function(){
if($(this).val()==""){$(this).val(oldVal).css({"color":"#888"})}
})
.keydown(function(){$(this).css({"color":"#000"})})
})
}
$(function(){
inputTipText(); //直接调用就OK了
})
</script>
</head>
<body>
<input type="text" value="输入您的用户名" class="grayTips" />
<input type="text" value="输入您的登录密码" class="aaagrayTips"/>
</body>
</html>二、input标签获取焦点是文本框内提示信息清空
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script language="javascript" type="text/javascript">
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
function checkText(){
var textId = document.getElementById('test');
//设置文本框中的字体颜色为灰色
document.getElementById('test').style.color='#C0C0C0';
var textDefault = '中文';
function cls(){
if (this.value == textDefault){
this.value = '';
}
}
function res(){
if (this.value == ''){
this.value = textDefault;
}
}
textId.onfocus = cls;
textId.onblur = res;
}
addLoadEvent (checkText);
</script>
<body>
<input type="text" id="test" value="中文" />
</body>
</html> 相关推荐
开心就好 2020-06-10
huha 2020-10-16
TLROJE 2020-10-26
echoes 2020-08-20
nercon 2020-08-01
zhanghaibing00 2020-06-28
Aveiox 2020-06-25
henryzhihua 2020-06-21
zhoutaifeng 2020-06-17
liangzhouqu 2020-06-16
TONIYH 2020-06-11
x青年欢乐多 2020-06-06
KyrieHe 2020-06-03
bertzhang 2020-06-02
haokele 2020-05-29
niehanmin 2020-05-28
davidliu00 2020-05-26