JavaScript實(shí)現(xiàn)清空(重置)文件類型INPUT元素值的方法

更新時(shí)間：2016年11月17日 11:43:06 作者：cuixiping

這篇文章主要介紹了JavaScript實(shí)現(xiàn)清空(重置)文件類型INPUT元素值的方法,結(jié)合實(shí)例形式分析了javascript清空input文本框的常用方法與實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript實(shí)現(xiàn)清空(重置)文件類型INPUT元素值的方法。分享給大家供大家參考，具體如下：

因?yàn)榘踩拗疲_本是不能隨意設(shè)置其value值的，所以并不能像其它表單輸入域那樣用屬性來(lái)設(shè)置使其重置。

重置一個(gè)文件域的值，歸納起來(lái)主要有 3 種方法。

本文分析這三種方法的瀏覽器兼容性以及優(yōu)缺點(diǎn)，并給出一個(gè)比較完美的綜合方案的代碼和Demo。

重置文件域的三種方法：

1. 設(shè)置value屬性為空。

對(duì)于IE11以上和其它較新的非IE的現(xiàn)代瀏覽器Chrome/Firefox/Opera...有效。

2. 克隆或創(chuàng)建一個(gè)新的文件輸入元素進(jìn)行替換。

利用createElement或者cloneNode克隆或創(chuàng)建一個(gè)新元素進(jìn)行替換，適用于所有瀏覽器。缺點(diǎn)也很明顯，就是替換后，將丟失原先綁定的事件監(jiān)聽(tīng)器，并丟失一些自定義的expando屬性。沒(méi)有這個(gè)問(wèn)題的情況下可以使用，不通用，我不建議使用這個(gè)方法。

3. 調(diào)用表單form元素的reset()方法。

form元素的reset()方法會(huì)重置表單內(nèi)的所有輸入元素，這并不是我們期望的，所以可以變通一下，創(chuàng)建一個(gè)新的form對(duì)象，將文件input元素放進(jìn)去之后再reset，再把文件input元素取出來(lái)放回原處，這樣就不會(huì)出現(xiàn)方法2的弊端了。

利用方法1和方法3結(jié)合，可以做到兼容所有瀏覽器。

JavaScript函數(shù)代碼如下：

function clearInputFile(f){
  if(f.value){
    try{
      f.value = ''; //for IE11, latest Chrome/Firefox/Opera...
    }catch(err){
    }
    if(f.value){ //for IE5 ~ IE10
      var form = document.createElement('form'), ref = f.nextSibling, p = f.parentNode;
      form.appendChild(f);
      form.reset();
      p.insertBefore(f,ref);
    }
  }
}

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: