textarea中的innerHtml，innerText和value

記錄今天所遇到textarea標籤取值的問題

首先建立一個textarea標籤

<textarea id="textareaTest" cols="30" rows="10">我是初始化文本</textarea>
複製代碼

此時分別console.log打印innerText,innerHtml,value

console.log('innerText:',textareaTest.innerText)  //innerText: 
    console.log('innerHTML:',textareaTest.innerHTML)   //innerHTML: 我是初始化文本
    console.log('value:',textareaTest.value)         //value: 我是初始化文本
複製代碼

發現默認寫入的字符串也給textarea中的value進行賦值，界面中的文本框和控制檯內textarea標籤中也有默認文本

接下來咱們在有默認值「我是初始化文本」的狀況下分別對innerText,innerHtml,value進行賦值操做看看變化

innerText

textareaTest.innerText = 'innerText'
    console.log('innerText:', textareaTest.innerText)  //innerText: 
    console.log('innerHTML:', textareaTest.innerHTML)   //innerHTML: innerText
    console.log('value:', textareaTest.value)         //value: innerText
複製代碼

innerHtml

textareaTest.innerHtml = 'innerHtml'
    console.log('innerText:', textareaTest.innerText)  //innerText: 
    console.log('innerHTML:', textareaTest.innerHTML)   //innerHTML: innerHtml
    console.log('value:', textareaTest.value)         //value: innerHtml
複製代碼

value

textareaTest.value = 'value'
    console.log('innerText:', textareaTest.innerText)  //innerText: 
    console.log('innerHTML:', textareaTest.innerHTML)   //innerHTML: 我是初始化文本
    console.log('value:', textareaTest.value)         //value: value
複製代碼

此時咱們再次進行innerHtml和innerText賦值

textareaTest.innerHtml = 'innerHtml'
    console.log('innerText:', textareaTest.innerText)  //innerText: 
    console.log('innerHTML:', textareaTest.innerHTML)   //innerHTML: innerHtml
    console.log('value:', textareaTest.value)         //value: value
複製代碼

textareaTest.innerText = 'innerText'
    console.log('innerText:', textareaTest.innerText)  //innerText: 
    console.log('innerHTML:', textareaTest.innerHTML)   //innerHTML: innerText
    console.log('value:', textareaTest.value)         //value: value
複製代碼

textareaTest.value = '我是新value'
    console.log('innerText:', textareaTest.innerText)  //innerText: 
    console.log('innerHTML:', textareaTest.innerHTML)   //innerHTML: innerText
    console.log('value:', textareaTest.value)         //value: 我是新value 
    //value又再次被賦值
複製代碼

發現雖然innerHtml一直在變化可是innerText從沒有改變過，且value在作完value賦值後就沒法經過value賦值外的方法改變

一句話總結：

由上可見Chrome中對textarea進行innerText取賦操做均無效(IE有效)

且當咱們在沒有對textarea的value進行操做前，對innerHtml和innerText進行字符串賦值，則textarea的value就有了一個默認的值，而且能夠經過innerHtml和value來獲取，可當對value進行操做後(文本框寫入也是操做value)，innerHtml和innerText則不會再對value進行賦值，且文本框優先顯示value中的內容

注：以上測試均在chrome瀏覽器中進行，偉大的IE則是賦值一個改變全部