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