IE6、9兼容paceholder两种解决方法
2015-10-13 10:54
211 查看
$(document).ready(function(){
var doc=document,inputs=doc.getElementsByTagName('input'),supportPlaceholder='placeholder'in doc.createElement('input'),placeholder=function(input){var text=input.getAttribute('placeholder'),defaultValue=input.defaultValue;
if(defaultValue==''){
input.value=text}
input.onfocus=function(){
if(input.value===text){this.value=''}};
input.onblur=function(){if(input.value===''){this.value=text}}};
if(!supportPlaceholder){
for(var i=0,len=inputs.length;i<len;i++){var input=inputs[i],text=input.getAttribute('placeholder');
if(input.type==='text'&&text){placeholder(input)}}}});
//第二种方法
$(function(){
if(!placeholderSupport()){ // 判断浏览器是否支持 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'));
}
}).blur();
};
})
function placeholderSupport() {
return 'placeholder' in document.createElement('input');
}
兼容IE6、IE9,但是在项目里导致了其他问题的出现,所以没有使用
var doc=document,inputs=doc.getElementsByTagName('input'),supportPlaceholder='placeholder'in doc.createElement('input'),placeholder=function(input){var text=input.getAttribute('placeholder'),defaultValue=input.defaultValue;
if(defaultValue==''){
input.value=text}
input.onfocus=function(){
if(input.value===text){this.value=''}};
input.onblur=function(){if(input.value===''){this.value=text}}};
if(!supportPlaceholder){
for(var i=0,len=inputs.length;i<len;i++){var input=inputs[i],text=input.getAttribute('placeholder');
if(input.type==='text'&&text){placeholder(input)}}}});
//第二种方法
$(function(){
if(!placeholderSupport()){ // 判断浏览器是否支持 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'));
}
}).blur();
};
})
function placeholderSupport() {
return 'placeholder' in document.createElement('input');
}
兼容IE6、IE9,但是在项目里导致了其他问题的出现,所以没有使用
相关文章推荐
- div+CSS 兼容小摘
- JAVASCRIPT IE 与 FF 中兼容写法记录
- CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法
- 兼容各个浏览器的技巧
- js更优雅的兼容
- IE和Firefox下javascript的兼容写法小结
- IE与FireFox的JavaScript兼容问题解决办法
- JAVASCRIPT IE 与 FF中兼容问题小结
- jQuery浏览器CSS3特写兼容实例
- 两种方法基于jQuery实现IE浏览器兼容placeholder效果
- setTimeout函数兼容各主流浏览器运行执行效果实例
- 纯JavaScript实现的兼容各浏览器的添加和移除事件封装
- 更优雅的事件触发兼容
- 编写兼容IE和FireFox的脚本
- Javascript 多浏览器兼容总结(实战经验)
- Javascript下IE与Firefox下的差异兼容写法总结
- 单击复制文字兼容各浏览器的完美解决方案
- js+css实现的简单易用兼容好的分页
- 兼容IE和FF的js脚本代码小结(比较常用)
- Javascript 多浏览器兼容性问题及解决方案