Question

您可以在网络上不时看到这些文字输入框：框内会显示一个灰色标签，但一旦您在那里输入，灰色文字就会消失。该页面甚至有一个：“标题”字段的行为与此完全相同。

所以，问题：

这是否有标准用语？我真的很难在谷歌找到任何东西
可以用CSS完成吗？
如果失败了，可以使用本地化的JavaScript吗？（即代码只在标记内，而不是在HTML标题中。）

Answer 1

所有主流浏览器的"placeholder"属性为now supported。

<form>
<input type="text" placeholder="placeholder text">
</form>

它的样式似乎仍然需要供应商前缀：

input::-webkit-input-placeholder {
    color: #59e;
}    
input:-moz-placeholder {  
    color: #59e;  
}

见到这里：http://jsfiddle.net/webvitaly/bGrQ4/2/

Answer 2

我不知道用CSS做这件事的方法。但是看一下页面来源，SO正在这样做：

<input name="q" class="textbox" tabindex="1" 
       onfocus="if (this.value=='search') this.value = ''" 
       type="text" maxlength="80" size="28" value="search">

以“onfocus”开头的中间行是工作正在进行的地方。当文本字段获得焦点时，它会检查是否存在默认值（“搜索”）。如果是这样，它将值设置为''（空字符串）。否则，文本不受影响。

这里的一个潜在问题是，如果有人试图搜索“搜索”这个词，那么在框外点击并再次点击，文本会重置。这不是一个大问题，但在你工作的时候要记住一些事情。

Answer 3

标准名称是水印输入。

如果您对JQuery感兴趣，请点击此页面 http://digitalbush.com/projects/watermark-input-plugin/

Answer 4

如果您只想使用HTML + CSS ，则可以尝试使用新的HTML5 placeholder输入属性。遗憾的是，此属性未得到广泛支持，因此请尝试使用Modernizr等脚本来检测此功能的浏览器支持功能。

我不建议使用内联Javascript - 这是不好的做法，违背了内容和行为分离的原则。例如，使用jQuery，这样的东西将起作用：

var input = $('input[name="search"]');
var placeHolder = input.attr('placeholder');

input.val(placeHolder);

input.focus(function(){
    this.value = '';
}).blur(function(){
    if(this.value === '') this.value = placeHolder;
});

Answer 5

新浏览器内置了HTML。

只需使用“占位符”属性：

＆LT; input id =“inputbox”type =“text”placeholder =“Hint Text Here”＆gt;

Answer 6

我称他们为输入标签。不知道这是不是标准
没有 - 如果他们被允许这样的子元素

input {
    position: relative;
}

input label {
    position: absolute;
    top: 0;
    left: 0;
}

input:focus label {
    display: none;
}

但你不能生孩子（AFAIK），所以无效。

是的，请参阅上面的链接（使用jQuery，但通常没有）

Answer 7

您可能已经找到了您正在寻找的答案，但对其他人而言，这可能有所帮助

<script>
    function inputFocus(i){
        if(i.value==i.defaultValue){ i.value=""; i.style.color="#000"; }
    }
    function inputBlur(i){
        if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; }
    }
</script>

...

<input type ="text"onfocus="inputFocus(this)" onblur="inputBlur(this)" value="Some Text"/>

希望这会有所帮助

你能在一个只有CSS的HTML文本框中显示灰色提示吗？

7 个答案: