`
mackcyl
  • 浏览: 1418 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

关于在FF浏览器下, 使用innerHTML获取不到元素值的解决方案

 
阅读更多
    前段时间接手了一个公司前辈的遗产代码 , 但是不兼容FF , 遂花了两个晚上, 终于勉强将问题解决, 所以标记一下, 为自己留个回忆, 如果能帮到各位好朋友, 那就更好!


     问题现象


function getDivCode(){
    divObj1 = document.getElementById('innerHtml_test1');
    divObj2 = document.getElementById('innerHtml_test2');
    html = divObj1.innerHTML;
    divObj2.innerHTML = html;
}



<div id="innerHtml_test1">
		 <input type="text" value="" name="test_name1"/>  
   		 <input type="text" value="" name="test_name2"/>  
</div>

<div id="innerHtml_test2">
</div>
	
<input type="button" onclick="getDivCode();" value="clickme"/>  



在IE8以下版本中,当用户在innerHtml_test1 的文本框中输入, 单击 button innerHtml_test2 中会正常获取 innerHtml_test1 的数据的结果 , 而 ff 及 ie8以上版本,则innerHtml_test2 可以取得 innerHtml_test1 的html代码格式, 但却无法取到用户输入到文本框中的值;



   解决方案 ,使用属性设置 , setAttribute


function getDivCode(){

   test_name1 = document.getElementById('test_name1');
   test_name2 = document.getElementById('test_name2');

   test_name1.setAttribute("value",test_name1.value)
   test_name2.setAttribute("value",test_name2.value)
	
    divObj1 = document.getElementById('innerHtml_test1');
    divObj2 = document.getElementById('innerHtml_test2');
    html = divObj1.innerHTML;
    divObj2.innerHTML = html;
}



尽管用这个方法非常的笨, 要是有1000个参数 , 那一定是会累死人, 希望有高手可以给出一个更好的解决方案, 供大家学习


0
0
分享到:
评论

相关推荐

    解决Firefox下outerHTML不支持问题

    标题"解决Firefox下outerHTML不支持问题"提示我们关注的是如何在Firefox中使用或模拟这个功能。 在Firefox中,如果尝试直接使用`element.outerHTML`,可能会遇到返回`null`或者不工作的情况。这是因为Firefox早期...

    兼容FF,IE的JAVASCRIPT日历控件

    "兼容FF,IE的JAVASCRIPT日历控件"就是这样一个旨在解决跨浏览器兼容性问题的解决方案。 标题中的"FF"通常代表Firefox,而"IE"则指Internet Explorer,这两个浏览器在历史上拥有不同的JavaScript引擎,对标准的实现...

    解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)

    本文将详细讨论一个特定的JavaScript问题,即在Internet Explorer(IE)浏览器中使用`innerHTML`属性向`&lt;select&gt;`元素插入`&lt;option&gt;`标签时遇到的bug,以及如何解决这个bug以实现跨浏览器兼容性,包括IE、Firefox、...

    兼容ie6/ie7/ie8/ff 省市县的js

    此插件的目的是提供一种解决方案,使得省市县选择的功能能在这些浏览器中无缝工作。 2. **DOM操作**:在实现这样的选择器时,JavaScript需要能够动态地创建、修改和删除HTML元素,这通常涉及到Document Object ...

    javascript实现动态增加删除表格行(兼容IE FF).docx

    通过上述介绍,我们了解到使用 JavaScript 实现动态增加删除表格行的方法,并且能够确保其在不同的浏览器中都能正常工作。这种方法不仅提高了网页的交互性,还增强了用户体验。此外,通过合理的代码设计和兼容性处理...

    web前端开发笔试集锦(javascript篇)参考.pdf

    7. **FF下的outerHTML**:Firefox不支持`outerHTML`属性,但可以通过创建新的元素,克隆原始元素,并设置新元素的innerHTML为原始元素的outerHTML来实现类似功能。 以上知识点涵盖了JavaScript的基础语法、字符串...

    微信开发之emoji表情在网页上显示,很好用

    为了确保兼容性,可以使用JavaScript库如`twemoji`,它提供了跨浏览器的解决方案,将不支持的emoji替换为图片。 6. 微信特定的处理:在微信环境下,可能还需要考虑到微信内置的浏览器以及微信小程序的限制。对于...

    一个快速添加标签的小玩意,但在FF下不能用,望高手指点

    2. **初步诊断**:怀疑问题可能出现在`obj.style.backgroundColor`返回值的不同,FF浏览器下返回的是`rgb(xxx,xxx,xxx)`格式。 ### 二、HTML基础知识 1. **元数据定义**:通过`&lt;meta&gt;`标签设置文档的字符集为UTF-8...

    js实现连续英文字符自动换行兼容ie6 ie7和firefox

    在本例中,我们要探讨的是如何使用JavaScript来实现连续英文字符在指定宽度限制下的自动换行,并确保该方案能够在不同的浏览器(包括较老的IE6和IE7,以及Firefox)中兼容运行。 在CSS中,通常可以使用`word-wrap`...

    javascript插入样式实现代码

    在这段代码中,首先检查是否已经存在对应ID的`&lt;style&gt;`元素,如果不存在,则创建并插入到`&lt;head&gt;`标签中,然后根据浏览器的兼容性使用不同的方法来设置样式。 #### 兼容性问题及其解决方案 当涉及到在不同的...

    JavaScript在IE中“意外地调用了方法或属性访问”

    #### 解决方案及建议 1. **检查对象状态:** 在调用任何方法或属性之前,确保对象仍然存在且处于预期的状态。 2. **避免在DOM变动后立即操作:** 尝试延迟执行可能会引用到已改变状态的DOM元素的操作。 3. **使用...

    图库新版jQuery焦点图 JS代码

    tips[44] = '设计有两种方法:一种是简单到明显没有缺陷,另一种复杂到缺陷不那么明显。—— 托尼·霍尔'; tips[45] = '广告创意不要超越大多数人的智商,否则会落得无人问津。'; tips[46] = '没人能拥有所有的答案...

Global site tag (gtag.js) - Google Analytics