javascript - 在javascript事件之后将innerHTML恢复为默认值

Question

我有一个事件侦听器，它接受用户输入并用用户输入替换默认文本“您的用户名”。

<input type="text" class="search">
<div id="username">Your Username</div>

<script>
    var search = document.querySelector('.search');
    search.addEventListener('input', changeText);
    function changeText() {username.innerHTML = `${this.value}`}
</script> 

如果用户退格所有输入，我希望 div 的 innerHTML 恢复为默认值（即“您的用户名”）。我怎样才能做到这一点？

标签： javascriptaddeventlistenerinnerhtmlrevert

Answer 1

将原始 HTML 存储在初始化中，如果 valye 为空字符串，则在更改侦听器中使用它：

var search = document.querySelector('.search');
var originalHTML = username.innerHTML;
search.addEventListener('input', changeText);
function changeText() {
  username.innerHTML =  this.value !== '' ? this.value : originalHTML; 
}