标签：web前端
如何实现跨浏览器的placeholder效果呢?
先看下效果
js代码如下:
$(‘#username‘).placeholder({
word: ‘用户名‘, color: ‘#ddd‘, normalFontColor: ‘#f00‘, maxLen: 4, minLen: 2, errorBorderClass: ‘errorBorder‘,
keyup_callback: function () {
console.log(‘keyup_callback‘);
}
});
$(‘#password‘).placeholder({word: ‘请输入密码‘, normalFontColor: ‘#f00‘, color: ‘#ddd‘}, function () {
console.log(‘callback‘);
});参数说明:
| 参数名 | 含义 | 示例 |
|---|---|---|
| word | 文本框默认显示文字 | 请输入密码 |
| color | 默认显示文字的颜色 | ‘#ddd’ |
| evtType | 事件类型,即什么事件触发默认文本消失 | 默认是’focus’ |
| maxLen | 文本框可输入的最长字符个数,0表示无限制 | |
| minLen | 文本框输入的最短字符个数,0表示无限制 | |
| normalFontColor | 正常输入文字时的字体颜色 | ‘#f00’ |
| errorBorderClass | 发生错误时生效的class | 比如当输入框中的文字个数小于minLen时,就会应用该class |
| keyup_callback | keyup的回调函数 | |
| blur_callback | 失效焦点的回调函数 | |
| focus_callback | 获得焦点的回调函数 | |
| click_callback | 单击事件的回调函数 | |
| keydown_callback | keydown事件的回调函数 |
html实例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>label左对齐</title>
<style>
ul, li {
/*list-style: outside none none;*/
list-style-type: none;
margin-left: 0;
}
li label {
width: 20%;
float: left; /* It is necessary */
}
li.button {
text-align: center;
margin-left: -40px;
}
input.errorBorder {
border: solid 1px #ff0000;
}
</style>
</head>
<body>
<form action="">
<ul style="width: 400px">
<li>
<label for="username">用户名</label><input id="username" type="text"/> <span>用户名不能为空</span>
</li>
<li>
<label for="password">密码</label><input id="password" type="text"/>
</li>
<li class="button">
<input type="button" value="下一步"/>
</li>
</ul>
</form>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="common_util.js"></script>
<script type="text/javascript" src="jplaceholder.js"></script>
<script type="text/javascript">
$(‘#username‘).placeholder({
word: ‘用户名‘, color: ‘#ddd‘, normalFontColor: ‘#f00‘, maxLen: 5, minLen: 2, errorBorderClass: ‘errorBorder‘,
keyup_callback: function () {
console.log(‘keyup_callback‘);
},keydown_callback: function () {
console.log(‘keydown...‘);
}
});
$(‘#password‘).placeholder({word: ‘请输入密码‘, normalFontColor: ‘#f00‘, color: ‘#ddd‘}, function () {
console.log(‘callback‘);
});
</script>
</body>
</html>代码下载地址:
[这里写链接内容](http://pan.baidu.com/s/1kTzkfeJ
这里写链接内容
版权声明：本文为博主原创文章，未经博主允许不得转载。
标签：web前端
原文地址：http://blog.csdn.net/hw1287789687/article/details/46654719
