`
SwordShadow
  • 浏览: 271008 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

常见的浏览器兼容问题总结

阅读更多

1、上传图片选择文件类型

 

	<input id="" name="" accept="image/jpg,image/jpeg,image/png,image/bmp,image/gif" type="file"
	title="点击选择文件"  />

不支持IE7,chrome

 

 

2、实时输入监控

 IE 支持 onpropertychange

   

 chrome 支持 input   推荐:实时监听输入框值变化的完美方案:oninput & onpropertychange

 

3、输入框的默认显示值

常用value来表示,但是需要很多额外的事件进行处理,placeholder是html5支持的属性

 

4、IE8文本框中默认垂直不居中,需要手动设置height和line-height,除IE内核浏览器外,缺省line-height时都会自适应文本框的height。

 

5、页面屏蔽backspace键

//页面加载完成
$(document).ready(function(){
    //禁止退格键 作用于Firefox、Opera 
    document.onkeypress = banBackSpace;
    //禁止退格键 作用于IE、Chrome
    document.onkeydown = banBackSpace;
});
//处理键盘事件 禁止后退键(Backspace)密码或单行、多行文本框除外 
function banBackSpace(e){
	//alert(event.keyCode)
    var ev = e || window.event;//获取event对象   
    var obj = ev.target || ev.srcElement;//获取事件源     
    var t = obj.type || obj.getAttribute('type');//获取事件源类型     
    //获取作为判断条件的事件类型 
    var vReadOnly = obj.readOnly;
    var vDisabled = obj.disabled;
    //处理undefined值情况 
    vReadOnly = (vReadOnly == undefined) ? false : vReadOnly;
    vDisabled = (vDisabled == undefined) ? true : vDisabled;
    //当敲Backspace键时,事件源类型为密码或单行、多行文本的,  
    //并且readOnly属性为true或disabled属性为true的,则退格键失效  
    var flag1 = ev.keyCode == 8 && (t == "password" || t == "text" || t == "textarea") && (vReadOnly == true || vDisabled == true);
    //当敲Backspace键时,事件源类型非密码或单行、多行文本的,则退格键失效    
    var flag2 = ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea";
    //判断    
    if (flag2 || flag1) 
        event.returnValue = false;//这里如果写 return false 无法实现效果 
}

 

不支持IE 11

 

 

 

 

分享到:
评论

相关推荐

    常见浏览器兼容问题

    ### 常见浏览器兼容问题 在Web开发中,浏览器兼容性问题一直是开发者们需要面对的重要挑战之一。不同浏览器对CSS、HTML等标准的支持程度不一,常常导致页面在不同浏览器下显示效果各异。本文将根据提供的部分描述,...

    IE6浏览器兼容问题总结及CSS排版注意地方

    IE6浏览器兼容问题总结及CSS排版注意地方 列举IE6中10个不得不注意的问题 重构你的代码

    JS浏览器兼容问题总结

    ### JS浏览器兼容问题总结 #### 一、Document.form.item问题 **现有问题**:在一些JavaScript代码中,经常出现`document.formName.item("itemName")`这样的语法,它主要用于获取表单中的元素。然而,这种写法仅能...

    常见浏览器兼容性问题与解决方案

    总结来说,解决浏览器兼容性问题需要对各种浏览器的解析规则有深入理解,通过适当的CSS技巧和Hack方法来确保在不同浏览器下的表现一致性。对于严谨的前端开发者,这不仅是提升用户体验的必要工作,也是提高代码可...

    常见浏览器兼容问题[文].pdf

    总结来说,解决浏览器兼容性问题需要开发者对不同浏览器的CSS解析特性有深入理解,并能灵活运用CSS Hack技巧。同时,合理使用浮动元素的闭合方法也至关重要,以保持页面布局的一致性和稳定性。随着现代浏览器的更新...

    javascript解决浏览器兼容性问题

    ### JavaScript 解决浏览器兼容性问题 #### 一、引言 在前端开发中,浏览器兼容性问题一直是开发者面临的重要挑战之一。随着不同浏览器版本的更新迭代,如何确保Web应用能够在各种浏览器环境中正常运行成为了关键...

    解决360双核浏览器兼容模式的页面显示问题

    总结来说,解决360双核浏览器兼容模式的页面显示问题,需要开发者了解其双核机制并合理使用内核控制Meta标签。此外,了解页面所依赖的技术特性,选择正确的内核渲染,是确保网站在360浏览器中正常显示的关键。开发者...

    CSS浏览器兼容问题

    ### CSS浏览器兼容问题详解 #### 一、引言 在Web开发过程中,浏览器兼容性问题一直是前端工程师关注的重点。不同的浏览器对于CSS的支持程度各不相同,导致同样的代码在不同的浏览器中可能呈现出不同的效果。本文将...

    CSS在不同浏览器中兼容问题

    本文将总结常见的 CSS 兼容问题和解决方法。 一、CSS 样式的差异 * 字串 8ul 和 ol 的默认 padding 值不同,Firefox 中为 40px,IE 中为 0,解决方法是设置 ul{margin:0;padding:0;} * 字体大小 small 的定义不同...

    浏览器兼容代码大全

    通过上述介绍,我们可以看到在Web开发过程中,解决浏览器兼容性问题的方法多种多样。无论是通过CSS技巧、特殊的选择器还是条件注释,都可以有效地提高网站的跨浏览器兼容性。希望这些知识能够帮助你更好地进行前端...

    css浏览器兼容问题

    ### CSS浏览器兼容问题详解 #### 一、引言 随着Web技术的发展,不同的浏览器对于CSS的支持程度也有所不同,这导致了在开发过程中经常会遇到浏览器之间的兼容性问题。本文旨在总结和分享一系列关于CSS兼容性的技巧...

    javascript解决innerText浏览器兼容问题思路代码.docx

    ### JavaScript 解决 `innerText` 浏览器兼容性问题 #### 背景介绍 在 Web 开发过程中,经常会遇到需要获取或修改 HTML 元素内部文本的需求。JavaScript 提供了多种方法来实现这一功能,其中较为常用的是 `...

    通杀所有浏览器兼容问题

    本文将根据提供的文件信息,深入探讨和总结“通杀所有浏览器兼容问题”的关键知识点,主要围绕div、css以及浏览器兼容性的常见问题与解决方案展开。 ### 一、基础知识重置 #### 1. CSS Reset 为了解决浏览器默认...

    浏览器兼容问题汇总

    ### 浏览器兼容问题汇总:深入解析与解决方案 在前端开发中,浏览器兼容性问题一直是困扰开发者的一大难题。不同的浏览器对CSS的支持程度不一,尤其是对于老旧版本的Internet Explorer(如IE6、IE7)、Firefox等,...

    CSS各浏览器兼容解决总结

    本文主要针对CSS在浏览器兼容性方面的一些常见问题及其解决策略进行总结。 1. **DOCTYPE声明的影响**: 为了确保CSS在所有浏览器中的一致性,W3C推荐使用DOCTYPE声明来指定文档类型。不正确的DOCTYPE会导致浏览器...

    IE个版本浏览器的兼容问题

    本文将从 IE 浏览器的 DOCTYPE 声明、CSS HACK、浏览器兼容问题等方面,总结出解决 IE 浏览器兼容问题的方法和技术。 一、DOCTYPE 声明和 HTML5 在 HTML5 中,使用 `&lt;!DOCTYPE html&gt;` 声明可以使网页“升级”到 ...

    最全的CSS浏览器兼容问题

    ### 最全的CSS浏览器兼容问题解析 #### 一、引言 随着Web技术的发展,不同浏览器及其版本间的差异成为前端开发者面临的一大挑战。本文旨在全面介绍CSS在不同浏览器中的兼容性问题及相应的解决方案,帮助开发者更好...

    解决浏览器兼容

    总结来说,解决浏览器兼容问题需要综合运用多种策略,包括遵循标准、使用前缀和特性检测、利用polyfills,以及选择合适的框架和库。通过不断学习和实践,我们可以构建出具有良好兼容性的Web应用,让更多的用户能够无...

Global site tag (gtag.js) - Google Analytics