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

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; 
}

Answer 2

您需要在eventListener上添加一个条件，如果输入值为null，则可以使用以下方法：

<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> 

Answer 3

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

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

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