在 javascript 事件后将 innerHTML 恢复为默认值
Revert innerHTML to default after javascript event
我有一个事件侦听器,它从用户那里获取输入并将默认文本 "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")。我该怎么做?
在初始化时存储原来的HTML,如果valye为空字符串,则在更改侦听器中使用它:
var search = document.querySelector('.search');
var originalHTML = username.innerHTML;
search.addEventListener('input', changeText);
function changeText() {
username.innerHTML = this.value !== '' ? this.value : originalHTML;
}
你需要在你的 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>
您可以使用 || 添加默认文本运算符。
function changeText() {username.innerHTML = `${this.value || 'Your default value'}`}
如果 this.value 为空、未定义或空,这会将文本设置为默认值。
我有一个事件侦听器,它从用户那里获取输入并将默认文本 "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")。我该怎么做?
在初始化时存储原来的HTML,如果valye为空字符串,则在更改侦听器中使用它:
var search = document.querySelector('.search');
var originalHTML = username.innerHTML;
search.addEventListener('input', changeText);
function changeText() {
username.innerHTML = this.value !== '' ? this.value : originalHTML;
}
你需要在你的 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>
您可以使用 || 添加默认文本运算符。
function changeText() {username.innerHTML = `${this.value || 'Your default value'}`}
如果 this.value 为空、未定义或空,这会将文本设置为默认值。