1

我有许多<input />框，我想开始它们的值类似于“输入您的名字... ”。

当您关注它们时，该值变为空，您可以输入。当你模糊它们时，如果没有输入任何内容，那么它会回到“输入你的名字...... ”。

我想过有这样的事情：

<input id="name" _startValue="Enter your name..." />

然后，像这样：

$(document).ready($("input").val($(this).attr(_startValue)));

这最初应该设置value为_startValue但它什么都不做。将行替换为：

$(document).ready($("input").val("hello"));

但是，确实有效，因此问题必须与$(this)或attr()。

首先，我如何让它工作。其次，如果我试图以一种非常迟钝的方式做到这一点，那么获得此功能的好方法是什么？

4

4 回答 4

4

我相信最好使用如下占位符：

 <input id="name" placeholder="Enter your name..." />
于 2012-11-26T04:39:16.190 回答
1 
                // v---you're not passing a function
 $(document).ready($("input").val($(this).attr(_startValue)));
          // `this` isn't magic-------^---- It doesn't just mean what you want

应该更像这样：

$(document).ready(function() {
    $("input").val(function() {
        return $(this).attr("_startValue");
    });
});
于 2012-11-26T04:40:04.053 回答
1

已经有这方面的库，如果你已经在使用 jquery，你应该使用它们。

https://github.com/mathiasbynens/jquery-placeholder

只需添加属性“占位符”并调用函数：

<input placeholder="my placeholder">
<script type="text/javascript">
    $("document").ready(function(){
        $("input").placeholder();
    });
</script>

注意，如果需要旧浏览器支持（特别是在IE中），则只需要添加插件，否则，该属性就足够了。

另外，请考虑如果您对此进行编码，则会出现错误，例如提交表单的默认值。jquery 插件通常做的事情是制作一个<span>或任何东西，并在输入为空时将其放在输入之上，并在输入不为空时将其隐藏。

于 2012-11-26T04:48:06.827 回答
0

模拟占位符的一种常见方法是将占位符文本放在元素的值中，然后检查焦点上的值，例如：

if (this.value == this.defaultValue) this.value = '';

然后模糊：

if (this.value == '') this.value = this.defaultValue;

请不要使用占位符代替标签或屏幕帮助（例如日期格式）。如果浏览器不支持 placeholder 属性，如果将其用作默认值是一个问题，最好不要模拟它们。

毕竟，占位符是“很高兴拥有”，它们不应该是正确使用表单的基础。

于 2012-11-26T05:24:08.873 回答