Question

我有一些<input />个框，我想开始使用“输入你的名字...... ”之类的值。

当您对焦它们时，该值变为空，您可以键入。当您模糊它们时，如果没有输入任何内容，则会返回“输入您的名字...... ”。

我想到了这样的事情：

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

然后，这样的事情：

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

这最初应该将value设置为_startValue，但它什么都不做。用以下内容替换该行：

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

确实有效，因此问题必须出在$(this)或attr()。

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

Answer 1

我认为最好使用占位符，例如：

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

Answer 2

                // 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");
    });
});

Answer 3

已有用于此的库，如果您已经在使用jquery，则应使用它们。

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

只需添加属性“placeholder”并调用函数：

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

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

另外，请考虑如果您对此进行编码，则会出现错误，例如提交表单的默认值。 jquery插件通常做的是创建<span>或其他什么，并在输入为空时将其放在输入的顶部，并在输入为空时隐藏它。

Answer 4

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

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

然后模糊：

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

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

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

在JQuery中将输入值设置为属性值

4 个答案: