东平县建设局网站,蔡甸做网站,开发公司网签房信息,免费建站哪家有placeholder 是 html5 新增加的属性#xff0c;主要提供一种提示#xff08;hint#xff09;#xff0c;用于描述输入域所期待的值。该提示会在输入字段为空时显示#xff0c;并会在字段获得焦点时消失。placeholder 属性适用于以下类型的 input 标签#xff1a;text, se…placeholder 是 html5 新增加的属性主要提供一种提示hint用于描述输入域所期待的值。该提示会在输入字段为空时显示并会在字段获得焦点时消失。placeholder 属性适用于以下类型的 input 标签text, search, url, telephone, email 以及 password。 我们先看下在谷歌浏览器中的效果如图所示 获得焦点时 输入字段 因为是 html5 属性自然低版本的浏览器比如 ie6-8 不兼容。下面就介绍下如何在低版本浏览器中显示以上效果话不多说直接上代码。 html !doctype html
html langen
headmeta charsetUTF-8/meta http-equivX-UA-Compatible contentIEedge,chrome1/meta namerenderer contentwebkit/meta namekeywords content/meta namedescription content/title基于 jquery 实现 ie 浏览器兼容 placeholder 效果/titlestyle*{margin:0;padding:0;}.txt{position:relative;font-size:12px;margin:10px;}.txt input{border:1px solid #ccc;height:30px;line-height:30px;padding:0 10px;width:200px;}.txt .txt-tip{color:#999;position:absolute;left:10px;top:0;height:32px;line-height:34px;}/style
/head
bodydiv classtxtinput typetext value//div
/body
/html
script srcjs/jquery.min.js/script
script srcjs/placeholder.js/script
script
$(function(){var $input $(.txt input);initPlaceholder($input, 请输入内容, txt-tip);
});
/script placeholder.js function initPlaceholder($input, msg, classname){var isIE !!window.ActiveXObject || ActiveXObject in window;var isPlaceholder placeholder in document.createElement(input);if(isPlaceholder !isIE){$input.attr(placeholder, msg);}else{var $tip $(span class classname msg /span);$input.after($tip);$.data($input[0], tip, $tip);if($input.val() ! ){hidePHTip($input);}dealPHTip($input, $tip);}
}
function hidePHTip($input){var $tip $.data($input[0], tip);if($tip){$tip.hide();}
}
function dealPHTip($input, $tip){var _deal function(){var val $input.val();if(val ){$tip.show();}else{$tip.hide();}};$tip.click(function(){$input.focus();});$input.on(input propertychange, function(){clearTimeout(timeout);var timeout setTimeout(_deal, 0);});
} 实现原理首先过滤下浏览器非 ie 浏览器并且支持 placeholder 属性就用 placeholderie 浏览器则用 span 代替 placeholder 文本内容通过样式定位在 input 上方同时监听 input 输入框值的变化来判断显示或隐藏 span。 我们来看下 ie6 浏览器中的效果 获得焦点时 输入字段 可以看到和谷歌浏览器的效果是一致的唯一不足的就是文字没有居中可以通过 css 进行修改。
