如何使 <input type="text"> 元素不可见，但仍显示用户输入？答案

【问题标题】：How to make <input type="text"> elements invisible, but still displaying user input?如何使 <input type="text"> 元素不可见，但仍显示用户输入？
【发布时间】：2019-01-26 13:21:01
【问题描述】：

我想在表单中为<input type="text"> 设置opacity:0。

但是，我仍然希望用户能够在这些表单字段中输入并查看他们的输入。

有没有办法让<input type="text"> 元素不可见，但仍保留其功能？

【问题讨论】：

为什么不用css。
@user111854：你的意思是像border:none？
@AkhilAravind — 他们正在使用 CSS。他们在问题中有 CSS 代码示例，并且正在使用 css 标签！！
这是一个直截了当的 XY 问题。请指定您的用例，应该能够为您提供更好的解决方案。
如果它是隐形的，他们怎么知道它的存在？

标签： javascript html css

【解决方案1】：

如果您希望用户看到他们键入的内容，则不能将不透明度设置为 0。

改为隐藏关于输入可见的所有其他内容。

body {
    background: #ccc;
}

input {
    background: transparent;
    border: none;
}

My name is &lt;input name=name placeholder=John&gt;.

【讨论】：

【解决方案2】：

你可以使用input:focus 然后opacity:1;

input{
opacity:0;
}
input:focus{
opacity:1;
}

&lt;span&gt;input by my right side&lt;/span&gt;&lt;input name=name placeholder="text here"/&gt;

仅显示占位符/值：

使用border:none;

    input{
    border:none;
    }

&lt;span&gt;input by my right side:&lt;/span&gt;&lt;input name=name placeholder="text here"/&gt;

【讨论】：

我认为这个想法不是为了展示专注的价值。该值应始终显示。
值还是占位符？
我认为两者都应该是可见的。

【解决方案3】：

你也可以使用contenteditable属性来代替input：

&lt;div class="input" contenteditable="true"&gt;Replace this value...&lt;/div&gt;

【讨论】：