Question

某些网站的表单输入类型=“text”。在这些文本框中有一个模糊的文本，例如：“在这里输入你的名字”。然后onClick或OnFocus或其他任何内容，文本消失，您可以键入文本框。

就像在stackoverflow上发布问题的标题一样，同样的事情。

这怎么做最简单的方法？如果没有太多的js参与，我宁愿选择。

由于

Answer 1

这不是模糊的文字，它被称为“水印”。您可以通过在输入上使用内联onfocus（）和onblur（）语句来创建相同的效果。

例如：

<input type="text" 
       class="watermark"
       value="Enter your name" 
       onfocus="if ( this.value == this.defaultValue || this.value == '' ) { this.value = ''; this.className = 'regular';}" 
       onblur="if ( this.value == '' ) { this.value = this.defaultValue; this.className='watermark';}" />

然后在CSS文件中，为.watermark和.regular定义类。这样，当显示为水印时，文本将是半透明的，当用户键入某些信息时，文本将变为完全不透明：

input.watermark {color:#ddd;}
input.regular {color:#000;}

Answer 2

这是通过叠加完成的。文本实际上不在输入内部，而是在其上方的范围内。当用户点击时，它将被设置为消失。

Answer 3

请注意这些简单的添加/删除标签解决方案，因为它们可能是1）由于依赖JavaScript而导致的可用性问题; 2）您可能会向表单提交一些“输入您的姓名”的提交内容这里“作为价值。

Here's a good overview潜在的顾虑和提供的解决方案。事实上，这个解决方案更像是SO“Ask Question”页面，它使用跨度覆盖而不是显示/隐藏文本。

要实现此特定解决方案（还有其他解决方案），您可以下载脚本here，将其放在您的服务器上，然后包含以下代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="/path/to/jquery.infieldlabel.min.js"></script>
<script>$(function(){ $("label").inFieldLabels(); });</script>

Answer 4

我从未见过文字模糊（我认为理论上可以用画布进行高斯模糊，但我从未见过它。）

但是，将输入的颜色设置为浅灰色（例如“color：#ccc”）并使输入包含一些占位符文本是很常见的。然后，onfocus，删除css颜色并将输入值设置为“”。

让文本消失在onclick上并不是一个好主意，因为人们可能会选择带标签的输入。

例如：

<input type="text" id="awesome" style="color: #ccc" value="Type your name here."/>

<script>
    (function(){
        var placeholder = true;
        var awesome = document.getElementById('awesome');
        var old_event = null;
        if (awesome.onfocus) {
            old_event = awesome.onfocus;
        }
        awesome.onfocus = function(){
            if (placeholder) {
                this.value = '';
                this.style.color = 'inherit';
                placeholder = false;
            }
            if (old_event) {
                old_event.apply(this, arguments);
            }
        };
    })();
</script>

输入类型“文字”以使文字模糊，在焦点上消失？

4 个答案: