textarea中的innerHtml，innerText和value

睡熊貓發表於2018-12-11
HTML

記錄今天所遇到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則是賦值一個改變所有

相關文章