在输入元素内隐藏文本答案

【问题标题】：Hiding Text inside of an input element在输入元素内隐藏文本
【发布时间】：2014-12-15 18:29:12
【问题描述】：

我有一个文本输入，我想在给定事件中隐藏文本（我禁用输入，当不需要时）。当给定事件反转时，我想显示隐藏的文本。

我知道我可以存储值并根据需要检索。我想避免移动数据，因为这纯粹是一种装饰操作。

可以隐藏输入文本，还是操作输入中的数据是唯一的方法？我想要最简单的解决方案。y？

我可以使用纯 JS 和 jQuery。

【问题讨论】：

您可以将值存储在数据属性中，甚至可以存储在 HTMLElement 对象本身中
有几种方法，选择“更好”或“更简单”是主观的，尤其是在没有设置标准的情况下。此外，选择还可能取决于整体程序逻辑，但未披露。

标签： javascript jquery html forms

【解决方案1】：

我会使用同一输入对象的“值”属性，因为该属性是默认值。在这种情况下，您甚至不需要任何其他变量。这种方法的想法来自于属性和属性之间的差异。这意味着如果你改变了对象的 value 属性，属性值保持不变。

var input = document.querySelector('input');

function hide() {
    input.value = "";
}

function show() {
    input.value = input.getAttribute('value');
}

<input type="text" value="Some text">
<button onclick="hide()">Hide</button>
<button onclick="show()">Show</button>

【讨论】：

【解决方案2】：

关于如何将输入元素的值存储在元素数据集中的示例。

并在悬停时显示/隐藏它。

var hello = document.getElementById('hello');
hello.dataset.value = hello.value;
hello.value = '';
hello.addEventListener('mouseover', function() {
  hello.value = hello.dataset.value;
});
hello.addEventListener('mouseout', function() {
  hello.value = '';
});

&lt;input id="hello" value="Hello World" /&gt;

【讨论】：