Question

如何制作像iCloud上看到的输入字段？

我希望占位符留在有人开始输入之前。有没有办法用jQuery来实现这个目标？

Answer 1

您可能指的是水印功能。

只要元素为空且没有焦点，水印通常在输入或textarea元素中显示为浅灰色文本。这为用户提供了输入或textarea元素的用途或所需输入类型的提示。

watermark http://jquery-watermark.googlecode.com/svn/trunk/jquery-watermark/wiki/sample-watermark.png

如果是这种情况，您可能需要尝试 jquery-watermark 。它原生支持HTML5 "placeholder"功能（在支持它的浏览器中），并在其他/旧版本中优雅地降级。

注意：存在许多其他插件。 Googling 'jquery watermark'或'jquery placeholder'会帮助您找到它们：）

注2：为了尽可能兼容，Apple 不依赖于HTML5占位符属性，只是利用JQuery隐藏重叠的div用户开始输入。

Answer 2

阅读“使用jQuery修复的HTML5占位符输入字段” - http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

Answer 3

HTML5占位符属性？

<input type="text" placeholder="Example Placeholder" />

Answer 4

您需要使用placeholder属性

<input type="text" id="user" name="user" placeholder="Please type your username" />

修改

好的，现在我明白了你的问题：根据之前的代码，你只需要绑定keydown并检查值是用户的值还是默认值

$(document).ready(function(){
    $('#user').keydown(function(e){
        if($(this).val()=='Please enter your username'){
            $('#user').val('');
        }
    });

    $('#user').focusout(function(){
        if($(this).val() == ''){
            $(this).val('Please enter your username');
        }
     });
});

在此测试：http://jsfiddle.net/G7s9u/41/

icloud.com喜欢表单输入字段

4 个答案: