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

【问题标题】：Revert innerHTML to default after javascript event在javascript事件之后将innerHTML恢复为默认值
【发布时间】：2020-05-21 10:27:40
【问题描述】：

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

<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 恢复为默认值（即“您的用户名”）。我该怎么做？

【问题讨论】：

标签： javascript addeventlistener innerhtml revert

【解决方案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; 
}

【讨论】：

谢谢。与其他两个提供的答案相比，我更喜欢这个答案，因为 innerHTML 可以是一个很大的 HTML 块，它使我不必再次输入它。非常感谢。

【解决方案2】：

你需要在你的事件监听器上添加一个条件，如果输入值为空，这样的事情就可以了：

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

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

【讨论】：

【解决方案3】：

您可以使用 || 添加默认文本运算符。

function changeText() {username.innerHTML = `${this.value || 'Your default value'}`}

如果 this.value 为 null、未定义或为空，这会将文本设置为默认值。

【讨论】：