此Jquery插件是一款非常实用的功能特效,最近看到很多网站的表单功能这块都采用了Jquery.placeholder插件实现,于是今天就把它整理出来分享给大家使用,使用很简单。
步骤如下:
1、引入Jquery插件文件和Jquery.placeholder插件文件
2、写上以下主要js功能代码
$(function() {
var $form = $('#regist');
var support = (function(input) {
return function(attr) {
return attr in input
}
})(document.createElement('input'));
$('.text', $form).placeholder({ hideOnFocus: false })
var hasFailureMsg = !!$('#summary li').length;
if (!hasFailureMsg) {
$('#email').focus()
}
})
3、HTML代码如下:
<div>
<label class="aria" for="email">邮箱帐号</label>
<input class="text" id="email" name="email" placeholder="邮箱帐号" spellcheck="false" tabindex="1" type="email" value="">
</div>
<div>
<label class="aria" for="fullname">真实姓名</label>
<input class="text" id="fullname" name="fullname" placeholder="真实姓名" type="text" value="">
</div>
<div>
<label class="aria" for="headline">自我介绍</label>
<textarea class="text" id="headline" name="headline" placeholder="个人介绍(职业背景、专业技能,不少于 4 字)"></textarea>
</div>
效果如下:
如果您觉得本作品对您的学习有所帮助:
关键字:
Jquery.placeholder 文字特效 提示插件 实用特效 表单验证