input的焦点占位符

最新推荐文章于 2024-06-21 14:41:01 发布

weixin_34259159

最新推荐文章于 2024-06-21 14:41:01 发布

阅读量135

点赞数

原文链接：http://www.cnblogs.com/imtie/archive/2013/06/07/3124101.html

版权

本文介绍了如何优化输入框的占位符，使其在所有主流浏览器中都能正常显示，并讨论了FF和Chrome与IE在展现方式上的差异。文章还提供了JavaScript代码实现，解决了一个小BUG，确保了用户体验的一致性。

摘要由CSDN通过智能技术生成

这个input的焦点占位符IE6也兼容，，目前所有的浏览器都兼容，不过还有点小BUG ，由于浏览器的展现方式不一样，FF和chrome跟IE的展现方式不一样，下一步还要更改

来源网络~~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fds</title>
<script type="text/javascript" src="min-jq.js"></script>
<style>
.placeholder{ color:#ccc !important; }
</style>
<script type="text/javascript">

$(function () {
if (!placeholderSupport()) {
var ph = $('[placeholder]');
ph.each(function () {
var $this = $(this);
$this.val($this.attr("placeholder")).addClass("placeholder");
});
$('[placeholder]').focus(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function () {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
});
};
})
function placeholderSupport() {
return 'placeholder' in document.createElement('input');
}
</script>