本文对比分析了JavaScript中innerHTML和value属性在IE与Chrome浏览器下的行为差异。重点探讨输入包含空格、回车及HTML标记时,各浏览器对字符解析、大小写转换及换行符(\n与\r\n)处理的不同表现,为跨浏览器兼容性开发提供参考。
innerHTML 属性对空格与回车的处理差异
空格处理
当在DIV元素中输入包含"a"、任意数量的空格以及另一个"a"的字符串时,HTML在Chrome和IE浏览器中的渲染结果一致:最终显示效果仅保留一个空格。
innerHTML属性
- IE浏览器中,innerHTML属性返回两个"a"字符中间包含一个空格。
- Chrome浏览器中,innerHTML属性则保留原始输入的完整格式。
回车处理
当在DIV元素中输入包含"a"、回车符、任意数量的空格以及另一个"a"的字符串时,HTML在Chrome和IE浏览器中的渲染结果一致。
innerHTML属性
- IE浏览器中,innerHTML属性返回3个字符,即在两个"a"之间插入了一个空格。
- Chrome浏览器中,innerHTML属性保留原始输入格式,并将回车符解析为换行符\n。
innerHTML 对 HTML 标记的大小写处理
HTML标记处理
当在DIV元素中输入包含"a"、"<Br>"以及另一个"a"的字符串时,HTML在Chrome和IE浏览器中的渲染结果一致。
innerHTML属性
- 在IE浏览器中,innerHTML属性返回"a<BR>a",即将HTML标记转换为大写形式。
- 在Chrome浏览器中,innerHTML属性返回"a<br>a",即将HTML标记转换为小写形式。
value 属性在 TEXTAREA 中的换行符差异
TEXTAREA中回车处理
在textarea多行文本框中输入包含"a"、回车符以及"b"的字符串时,HTML在Chrome和IE浏览器中的渲染结果一致。
value属性
- IE浏览器中,value属性返回4个字符,内容为"a\r\nb"。
- Chrome浏览器中,value属性返回3个字符,内容为"a\nb"。
转载自 http://www.cnblogs.com/zjfree/