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