如何实现跨浏览器的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');
});
参数说明:
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>
使用示例:
var $invoice_title = $('input[name=invoice_title]');
$invoice_title.inputclean({
inputClearClass: 'inputClearBtn',
deviationTop: 0,
parentHoverClass: 'inputParentLi',
deviationLeft: 2
});
$invoice_title.placeholder({
word: '请输入抬头信息',
color: '#ddd',
normalFontColor: '#000', /* maxLen: 4, minLen: 2,*/
errorBorderClass: 'errorBorder',
parentInputFocusClass: 'inputFocus',
isAdapterInputclean: true
});
var $address_detail = $('input[name=address_detail]');
$address_detail.inputclean({
inputClearClass: 'inputClearBtn',
deviationTop: 0,
parentHoverClass: 'inputParentLi',
deviationLeft: 2
});
$address_detail.placeholder({
word: '请输入详细地址',
color: '#ddd',
normalFontColor: '#000', /* maxLen: 4, minLen: 2,*/
errorBorderClass: 'errorBorder',
parentInputFocusClass: 'inputFocus',
isAdapterInputclean: true
});
$ChanjetNewCodeInput.placeholder({
word: ERROR_MESSAGE_SMSCODE_PLEASE_INPUT,
color: '#999',
normalFontColor: '#333333',
keyup_callback: CodeInputKeyUp,
focus_callback: CodeInputKeyUp,
blur_callback: function () {
checkSMSCode($ChanjetNewCodeInput, $newSMSCodeMsg, true)
}
});
$ChanjetNewMobileInput.placeholder({
word: '请输入11位有效手机号码',
color: '#999',
normalFontColor: '#333333',
keyup_callback: NewMobileInputKeyUp,
focus_callback: function () {
normalBorderInput($ChanjetNewMobileInput);
},
blur_callback: function (event) {
//var eventTarget = event.srcElement || event.target || event.toElement;
var mobileVal = $ChanjetNewMobileInput.val();
if (!isMobile(mobileVal)) {
setNewMobileMsg('newMobileError', '请输入11位有效手机号码');
disAbleNextBtn($('#getNewSMSCode'));
errorBorderInput($ChanjetNewMobileInput);
}
}
});
注意:
1,属性color 表示placeholder的字体颜色;
2,isAdapterInputclean 表示兼容inputFocus,怎么兼容呢?
inputFocus的效果就是文本框聚焦时× 是永久显示的,不管光标在什么地方;当失去光标时,只有hover时才显示×
所以文本聚焦时会应用一个css class,当失去焦点时就要移除该class
代码下载地址:见附件
参考:http://blog.csdn.net/hw1287789687/article/details/46654719
作者:黄威
联系邮箱:1287789687@qq.com
相关推荐
为了实现跨浏览器的`placeholder`兼容性，开发者通常需要借助JavaScript库或jQuery插件来模拟这一功能。本篇将探讨如何实现这一目标，同时分析提供的文件内容。 首先，`form4_placehold_value.html`很可能是测试...
为了解决这个问题，开发者通常会利用JavaScript来实现跨浏览器的`placeholder`兼容性处理。 标题"javascript版placeholder解决一些浏览器不支持placeholder属性的问题"指的就是通过JavaScript来模拟`placeholder`的...
NULL 博文链接：https://xa-zbl.iteye.com/blog/1334822
jQuery是一个广泛使用的JavaScript库，简化了DOM操作、事件处理、AJAX请求等任务，使得开发者能够更容易地实现跨浏览器的兼容性代码。 为了在IE7中实现`placeholder`兼容，首先需要在`index.html`中引入`jquery-...
jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理和AJAX交互等任务，使得开发者能更容易地实现跨浏览器的兼容性功能。`jquery-placeholder-master`可能是一个包含完整源代码、文档和示例的项目，用于在IE...
因此，在现代项目中，我们更倾向于使用支持`placeholder`的现代浏览器，或者结合polyfill库来实现跨浏览器兼容。然而，对于仍需支持IE8的项目，`jquery-placeholder`无疑是一个可靠的解决方案。
此外，你还可以使用现有的前端库和插件，如jQuery Placeholder或Modernizr，它们提供了更完善的跨浏览器解决方案，可以自动检测浏览器对`placeholder`的支持情况，并提供相应的polyfill。 总之，为确保登录表单的`...
利用jQuery，开发者可以快速实现跨浏览器的功能实现。 4. 什么是IE6？ IE6是微软公司的Internet Explorer浏览器的第六个版本，发布于2001年。由于其设计理念较为落后，加上安全和兼容性问题，它在现代web开发中...
`jQuery Placeholder`插件是实现跨浏览器`placeholder`属性支持的一个有效工具，尤其对于那些需要兼容旧版IE浏览器的项目来说。通过简单的引入和初始化，我们就能为所有用户带来一致的用户体验，无论他们使用的...
跨浏览器和跨样式 支持所有输入类型，密码，文本区域，文本，电子邮件，搜索，URL等。 稳健：它的行为完全符合规范中定义HTML5占位符 规范现代浏览器中的占位符行为（可选）。 这意味着占位符将隐藏在输入焦点上。 ...
为了改善用户体验，可以通过jQuery插件或脚本实现跨浏览器的placeholder兼容。 本文将详细介绍两种利用jQuery库快速解决input中placeholder值在IE浏览器中无法支持的方法。首先，了解在IE中placeholder无法显示的...
HTML5的`placeholder`属性是...虽然现代浏览器大多已经支持，但在处理跨浏览器兼容性问题时，了解如何用JavaScript和CSS来模拟`placeholder`效果是非常有必要的。这个压缩包提供的解决方案可以作为一个很好的学习资源。
此外，还可以使用一些现成的库，如jQuery Placeholder插件，它们已经处理了这些兼容性问题，只需要引入库并简单配置即可实现跨浏览器的提示文字。 总结来说，要实现`input`框中出现提示文字并兼容IE、火狐和谷歌，...
总结来说，"网页内容placeholder占位特效.zip"中的项目展示了如何通过HTML5的`placeholder`属性，配合jQuery和CSS来实现跨浏览器的占位符特效。这样的效果可以提高用户的交互体验，使网页表单更易用。在实际开发中，...
如何实现跨浏览器的placeholder效果呢? 附件是我写的一个jquery插件,可以实现兼容IE7,IE8及以上浏览器的placeholder效果
总结起来，这个插件解决了H5`placeholder`属性在IE浏览器中的兼容性问题，通过代码封装和闭门技术实现了跨浏览器的支持。对于开发者来说，这是一个极好的学习资源，可以帮助他们提高在实际项目中处理浏览器兼容性...
由于无法直接访问这个链接，我将基于常见的实践来解释如何实现一个跨浏览器的可编辑下拉框。 实现这样的功能，开发者通常会使用HTML、CSS和JavaScript（或者使用诸如jQuery、React、Vue等前端框架）。以下是一个...
然而，不同的浏览器对CSS的解析方式存在差异，导致了跨浏览器兼容性问题。为了解决这些问题，开发者们发明了一种技巧，被称为“CSS hack”，以确保网页在不同浏览器上呈现出一致的效果。本文将详细介绍CSS hack及其...
为了确保跨浏览器兼容性，可以使用jQuery插件如`jquery.placeholder.js`，或者使用条件注释和polyfill来为不支持`placeholder`属性的浏览器添加兼容性支持。 5. **网络环境的影响**：在网络环境中，加载jQuery库和...