jQuery删除焦点上的文本

我一直在尝试在文本输入中使用默认值，然后使用jQuery，当您“聚焦”文本框时，它会使文本变为黑色（默认为浅灰色），并删除默认值。我想你知道我在说什么，那么你知道如何做到这一点吗？

可以让你达到想要的效果

$('input:text').bind({
    focus: function () {
        var self = $(this);

        if (self.val() == self.attr('defaultValue')) {
            self.val('').removeClass('default');
        };
    },
    blur: function () {
        var self = $(this),
            val = jQuery.trim(self.val());

        if (val == "" || val == self.attr('defaultValue')) {
          self.val(self.attr('defaultValue')).addClass('default');  
        };
    }
}).trigger('blur');

有一个CSS类

default

，它将文本颜色设置为您想要的任何颜色

用法示例：

​

参见工作示例：

---

基本上创建HTML5文本元素的占位符属性所支持的内容。因此，您只需使用占位符属性，然后检查浏览器是否支持占位符功能：

function supports_input_placeholder() {
    var i = document.createElement('input');
    return 'placeholder' in i;
}
if (!support_input_placeholder()) {
    $(':text').focus(function(){
        var self = $(this);
        if (self.val() == self.attr('placeholder')) {
            self.val('');
        }
    }).blur(function(){
        var self = $(this),
            value = $.trim(self.val());
        if(val == '') {
            self.val(self.attr('placeholder');
        }
    });
}

<input type="text" name="desc" placeholder="My Email Account">

函数支持\u输入\u占位符（）{
var i=document.createElement（'input'）；
在i中返回“占位符”；
}
如果（！支持\u输入\u占位符（））{
$（':text'）.focus（函数（）{
var self=$（这是）；
if（self.val（）==self.attr（'placeholder'））{
self.val（“”）；
}
}).blur（函数（）{
var self=$（此），
value=$.trim（self.val（））；
如果（val=''）{
self.val（self.attr（'placeholder'）；
}
});
}

我当前用于输入城市值的内容。在聚焦时，它删除该值。在模糊（未聚焦）时，它返回默认值，但通知用户它是必需的

css html

---

您也可以使用谷歌水印插件，方法如下：

下载最新的jQuery脚本：

下载水印插件：

===============================

<script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.watermark.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(function () {
        $("#input-name").watermark("Your name");
        $("#input-email").watermark("Your e-mail address");
    });
});
</script>

<div id="wrap-contact">
<form id="form-contact" name="form-contact" method="post" action="">
<div id="layer-email">
<input type="text" name="input-email" id="input-email" />
</div>
<div id="layer-name">
<input type="text" name="input-name" id="input-name" />
</div>
</form>
</div>

/*
========================
form styles
========================
*/
#wrap-contact {
    margin: auto;
    width: 760px;
}
#layer-email {
    float:left;
    width:340px;
    padding:2px;
    background:#ccc url(images/user.png) no-repeat 98% 50%;
}
#layer-name {
    float:right;
    width:340px;
    padding:2px;
    background:#ccc url(images/email.png) no-repeat 98% 50%;
}
#input-email {
    width: 260px;
    font: 18px Arial, Helvetica, sans-serif;
    border:1px solid #fff;
    padding: 4px;

}
#input-name {
    width: 260px;
    font: 18px Arial, Helvetica, sans-serif;
    border:1px solid #fff;
    padding: 4px;
}

/*
========================
watermark styles
========================
*/
.watermark {color: #999 !important;}

<input type="text" class="city" value="City" id="oCity" name="oCity"></input>
<label class="oCity red"></label>
<input type="text" class="city" value="City" id="dCity" name="dCity">
<label class="dCity red"></label>​
<input type="text" class="city" value="City" id="dCity" name="dCity">
<label class="dCity red"></label>​

$(document).ready(function() {
var defaultVal = 'City';
$('.city').focus(function() {
    $(this).val('');
});
 $('.city').blur(function(){
    var Value = $(this).val();
    var oId = $(this).attr('id');
    if(Value == '')
    {
        $(this).val(defaultVal);
        $('.'+oId).text('Required');
    }           
});
});​

<script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.watermark.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(function () {
        $("#input-name").watermark("Your name");
        $("#input-email").watermark("Your e-mail address");
    });
});
</script>

<div id="wrap-contact">
<form id="form-contact" name="form-contact" method="post" action="">
<div id="layer-email">
<input type="text" name="input-email" id="input-email" />
</div>
<div id="layer-name">
<input type="text" name="input-name" id="input-name" />
</div>
</form>
</div>

/*
========================
form styles
========================
*/
#wrap-contact {
    margin: auto;
    width: 760px;
}
#layer-email {
    float:left;
    width:340px;
    padding:2px;
    background:#ccc url(images/user.png) no-repeat 98% 50%;
}
#layer-name {
    float:right;
    width:340px;
    padding:2px;
    background:#ccc url(images/email.png) no-repeat 98% 50%;
}
#input-email {
    width: 260px;
    font: 18px Arial, Helvetica, sans-serif;
    border:1px solid #fff;
    padding: 4px;

}
#input-name {
    width: 260px;
    font: 18px Arial, Helvetica, sans-serif;
    border:1px solid #fff;
    padding: 4px;
}

/*
========================
watermark styles
========================
*/
.watermark {color: #999 !important;}