一个简单的jQuery示例，向您展示如何在输入字段上实现水印文本效果。
1.代码段
电子邮件输入字段和CSS水印类。
<style type="text/css">
input.watermark { color: #999; } //light silver color
</style>
<label>Email : </lable>
<input id="email" type="text" />jQuery将水印效果应用于电子邮件字段。
$(document).ready(function() {
var watermark = 'Puts your email address';
//init, set watermark text and class
$('#email').val(watermark).addClass('watermark');
//if blur and no value inside, set watermark text and class again.
$('#email').blur(function(){
if ($(this).val().length == 0){
$(this).val(watermark).addClass('watermark');
}
});
//if focus and text is watermrk, set it to empty and remove the watermark class
$('#email').focus(function(){
if ($(this).val() == watermark){
$(this).val('').removeClass('watermark');
}
});
});2.演示
完整的HTML源代码。
<html>
<head>
<title>jQuery and watermark example</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
input.watermark { color: #999; }
input {
padding:4px;
text-indent: 5px;
width:200px;
font-size:14px;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
var watermark = 'Puts your email address';
//init, set watermark text and class
$('#email').val(watermark).addClass('watermark');
//if blur and no value inside, set watermark text and class again.
$('#email').blur(function(){
if ($(this).val().length == 0){
$(this).val(watermark).addClass('watermark');
}
});
//if focus and text is watermrk, set it to empty and remove the watermark class
$('#email').focus(function(){
if ($(this).val() == watermark){
$(this).val('').removeClass('watermark');
}
});
});
</script>
<h2>jQuery - Watermark on input text</h2>
<label>Email : </lable>
<input id="email" type="text" />
</body>
</html>结果。
下载源代码
下载它-jQuery-watermark-input.zip （1kb）
翻译自: https://mkyong.com/jquery/jquery-watermark-effect-on-text-input/
536
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
