隐藏输入元素内的文本

Hiding Text inside of an input element

本文关键字：文本 元素 输入 隐藏      更新时间：2023-09-26

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

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

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

我可以使用纯JS和jQuery。

我会使用同一输入对象的"value"属性，因为该属性是默认值。在这种情况下，您甚至不需要任何其他变量。这种方法的想法来自属性和属性之间的差异。这意味着，如果更改对象的 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>

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

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

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 = '';
});
<input id="hello" value="Hello World" />

相关文章：