记录今天所遇到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
中的内容