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则是赋值一个改变全部