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

Question

我有一个事件侦听器，它从用户那里获取输入并将默认文本 "Your Username" 替换为用户输入。

<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 恢复为默认值（即 "Your Username"）。我该怎么做？

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 为空、未定义或空，这会将文本设置为默认值。

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

Revert innerHTML to default after javascript event

javascript

addeventlistener

innerhtml

revert