textarea中的innerHtml,innerText和value

1,713 阅读2分钟

记录今天所遇到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

此时我们再次进行innerHtmlinnerText赋值

    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有效)

且当我们在没有对textareavalue进行操作前,对innerHtmlinnerText进行字符串赋值,则textareavalue就有了一个默认的值,并且可以通过innerHtmlvalue来获取,可当对value进行操作后(文本框写入也是操作value),innerHtmlinnerText则不会再对value进行赋值,且文本框优先显示value中的内容

注:以上测试均在chrome浏览器中进行,伟大的IE则是赋值一个改变所有