如何解决删除现有内容后如何显示texarea的innerHTML
我试图隐藏和显示基于焦点和模糊的文本区域的innerHTML。它运作良好。但问题是,当我删除输入的文本时,内部的 innerHTML 已经存在于元素中,但没有显示。以下是问题复制步骤:
let textarea = document.querySelectorAll("textarea");
for (i = 0; i < textarea.length; i++) {
let innertext = textarea[i].innerHTML;
textarea[i].addEventListener("focus",(e) => {
e.target.innerHTML = "";
})
textarea[i].addEventListener("blur",(e) => {
e.target.innerHTML = innertext;
})
}
<textarea name="" id="" cols="30" rows="10">Test</textarea>
解决方法
此解决方案使用占位符:
<textarea name="" id="" cols="30" rows="10" placeholder='Test'></textarea>
let textarea = document.querySelectorAll("textarea");
for(i=0;i<textarea.length;i++) {
let innertext = textarea[i].placeholder;
textarea[i].addEventListener("focus",(e)=>{
console.log( e.target.placeholder);
e.target.placeholder = '';
});
textarea[i].addEventListener("blur",(e)=>{
e.target.placeholder = innertext;
})
}
,
使用 .value
而不是 .innerHTML
来更改/检索 textarea
的值。对 innerHTML
的内容进行更改后,textarea
属性不会在浏览器中更新。
let textarea = document.querySelectorAll("textarea");
for (i = 0; i < textarea.length; i++) {
let innertext = textarea[i].innerHTML;
textarea[i].addEventListener("focus",(e) => {
e.target.value = "";
})
textarea[i].addEventListener("blur",(e) => {
e.target.value = innertext;
})
}
<textarea name="" id="" cols="30" rows="10">Test</textarea>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。