如何删除 JavaScript 中的占位符文本？ [复制]

Posted 2023-03-05

【中文标题】如何删除 JavaScript 中的占位符文本？ [复制]

【英文标题】：How to remove placeholder text in JavaScript? [duplicate]

【发布时间】：2021-03-31 05:34:36

【问题描述】：

我编写了一些代码来删除输入占位符文本，它按预期工作。我遇到的问题是如何在占位符被删除后重置它的值？

const input = document.getElementById('input');

if (input.placeholder) 
  input.addEventListener('focus', (e) => 
    input.placeholder = '';
  );
 else 
  input.placeholder.preventDefault()
;

<div class="mainInput">
  <input type="text" class="input" id="input" placeholder="Enter your todo : ">
  <button class="btn" id="btn">Submit</button>
</div>
<span> Todo list : </span>

【问题讨论】：

“重置”是什么意思？为什么要删除占位符？

在加载时使用删除属性函数：input.removeAttribute("placeholder");

@NicoHaase 是的，不需要删除占位符。

默认情况下，一旦您开始输入输入，所有占位符文本都会被删除 - 当您清除输入时，它是“重置”（占位符文本重新出现）。除了默认行为之外，我真的不确定您要在这里实现什么

如果您只想隐藏占位符，那么这就是您正在寻找的解决方案***.com/questions/9707021/…

【参考方案1】：

我认为这个解决方案应该适合你！

它只会重置您的占位符值。

const input = document.getElementById('input');

if (input) 
   // it will remove placeholder value on focus and store with dataset variable
  input.addEventListener('focus', (e) => 
    input.dataset.placeholder = input.placeholder
    input.placeholder = '';
  );
    
  // it will reset placeholder value on blur by dataset variable
  input.addEventListener('blur', (e) => 
    input.placeholder = input.dataset.placeholder;
  );
else
  console.log("input is not defined",input);

<div class="mainInput">
  <input type="text" class="input" id="input" placeholder="Enter your todo : ">
  <button class="btn" id="btn">Submit</button>
</div>
<span> Todo list : </span>