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

关键词：

【中文标题】如何删除 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>

【讨论】：

如何在swift中使用Google Material MDCOutlinedTextField从文本字段中删除占位符文本？

】如何在swift中使用GoogleMaterialMDCOutlinedTextField从文本字段中删除占位符文本？【英文标题】：howtoremoveplaceholdertextfromtextfieldusingGoogleMaterialMDCOutlinedTextFieldinswift?【发布时间】：2021-08-3112:23:03【问题描述】：这是我编写的代码，但... 查看详情

从使用 CALayer 样式的 UITextField 中的占位符文本中删除阴影

】从使用CALayer样式的UITextField中的占位符文本中删除阴影【英文标题】：RemoveshadowfromplaceholdertextinUITextFieldstyledusingCALayer【发布时间】：2013-11-2704:04:46【问题描述】：我从InterfaceBuilder(IB)创建了一个UITextField。因为我想要自定义样... 查看详情

如何使用脚本更改 Unity UI 中的占位符文本？

】如何使用脚本更改UnityUI中的占位符文本？【英文标题】：HowtochangeplaceholdertextinUnityUIusingscript?【发布时间】：2015-04-1617:36:10【问题描述】：对于我的项目，默认值是根据外部输出计算的，可以使用新UnityUI中的输入字段更改这... 查看详情

文本区域表单中的 Html 占位符文本

...制为500个字符，因为我不想阅读大量内容，并且我想出了如何在用户输入他们想要的内容之前让文本出现在textarea中。目前用户必须自己删除“您的想法的描述”，但 查看详情

从 Google Maps Places API 中删除占位符文本

...成功能，类似于：https://developers.google.com/maps/documentation/javascript 查看详情

如何使用 Javascript 更新占位符颜色？

】如何使用Javascript更新占位符颜色？【英文标题】：HowtoupdateplaceholdercolorusingJavascript?【发布时间】：2019-07-1123:05:58【问题描述】：我正在网上搜索，但没有找到任何东西。我正在尝试使用javascript更新文本框的占位符颜色，但我... 查看详情

如何在占位符文本上启动光标位置中心反应原生？

】如何在占位符文本上启动光标位置中心反应原生？【英文标题】：Howtoinitiatecursorpositioncenteroverplaceholdertextreactnative?【发布时间】：2021-06-2301:24:53【问题描述】：我的textinput光标最初在占位符文本的开头闪烁。如果我删除占位... 查看详情

如何使用空占位符文本

】如何使用空占位符文本【英文标题】：Howtouseemptyplaceholdertext【发布时间】：2014-05-2006:25:08【问题描述】：这个问题很清楚。我如何使用占位符中的文本，例如来自下面的文本。我一直在寻找这个并没有找到解决方案。我们将... 查看详情

如何在 C#/MVC 4 中的 Html.TextBoxFor 中输入占位符文本

】如何在C#/MVC4中的Html.TextBoxFor中输入占位符文本【英文标题】：HowtoEnterPlaceholderTextWithinHtml.TextBoxForinC#/MVC4【发布时间】：2017-10-1606:08:09【问题描述】：通常在HTML/CSS中，如果您想将占位符文本添加到文本框，您只需这样做：&... 查看详情

如何在标题中的 jqGrid 文本字段中添加占位符？

】如何在标题中的jqGrid文本字段中添加占位符？【英文标题】：HowtoaddaplaceholdertojqGridtextfieldintheheader?【发布时间】：2016-05-3004:05:09【问题描述】：我的jqgrid包含多个字段，我想过滤网格。例如，假设我的网格包含“名称”字段... 查看详情

如何更新 ng2-smart-table 中的占位符文本？

】如何更新ng2-smart-table中的占位符文本？【英文标题】：Howtoupdateplaceholdertextinng2-smart-table?【发布时间】：2019-02-1309:46:23【问题描述】：我使用ng2-smart-table在angular6应用程序中显示数据。我启用了过滤器功能。现在我想将默认的se... 查看详情

在 Swift 中的 UITextView 中添加占位符文本？

...extViewinSwift?【发布时间】：2015-02-2311:26:06【问题描述】：如何在UITextView中添加一个占位符，类似于在Swift中为UITextField设置的占位符？【问题讨论】：这是iOS开发中使用UITextView的一个古老问题。我已经编写了像这里提到的子类：... 查看详情

Zend 文本元素中的占位符文本

...点：<inputtype="text"placeholder="Search"name="q"/>我的问题是如何使用Zend表单在我的输入框中添加 查看详情

如何根据它是不是是占位符来更改 textarea 文本的颜色？

...布时间】：2012-08-2017:34:28【问题描述】：我基本上想使用JavaScript重新创建HTML5“占位符”属性，以便它与旧浏览 查看详情

如何更改出现在 Chrome 日期字段中的 HTML5 占位符文本

】如何更改出现在Chrome日期字段中的HTML5占位符文本【英文标题】：HowdoIchangetheHTML5placeholdertextthatappearsindatefieldinChrome【发布时间】：2012-10-0308:59:08【问题描述】：我惊喜地发现以下代码在Chrome中查看时会呈现一个日期选择器：&l... 查看详情

javascript占位符文本支持废话浏览器(代码片段)

查看详情

使用 JavaScript 更改焦点占位符文本的颜色 [关闭]

】使用JavaScript更改焦点占位符文本的颜色[关闭]【英文标题】：ChangingcolorofplaceholdertextonfocuswithJavaScript[closed]【发布时间】：2016-01-2200:38:04【问题描述】：我正在尝试将占位符文本的颜色更改为白色焦点。您可以查看联系表格here... 查看详情

缩小占位符文本后如何使占位符和文本框光标居中？

】缩小占位符文本后如何使占位符和文本框光标居中？【英文标题】：HowcanIcentertheplaceholderandtextboxcursoraftershrinkingtheplaceholdertext?【发布时间】：2020-06-1203:41:05【问题描述】：我有一个输入文本框，里面有占位符文本；现在，我... 查看详情